/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-icon/usage.vue
67 строк
1 KB
John Leider
chore: add vue/attributes-order eslint rule
29 фев 2024, 07:06
29 фев 2024, 07:06
65aff8f
Код
Авторство
О чём код?
<template> <ExamplesUsageExample v-model="model" :code="code" :name="name" :options="options" > <div class="text-center"> <v-icon v-bind="props"></v-icon> </div> <template v-slot:configuration> <v-select v-model="size" :items="sizes" label="Size"></v-select> <v-select v-model="color" :items="colors" label="Color"></v-select> <v-select v-model="icon" :items="icons" label="Icon" clearable></v-select> </template> </ExamplesUsageExample> </template> <script setup> const name = 'v-icon' const model = ref('default') const icon = ref() const size = ref() const color = ref() const options = [] const props = computed(() => { return { color: color.value || undefined, icon: icon.value || '$vuetify', size: ['', 'medium'].includes(size.value) ? undefined : size.value, } }) const colors = [ 'success', 'info', 'warning', 'error', ] const icons = [ 'mdi-plus', 'mdi-check-circle', 'mdi-information', 'mdi-alert', 'mdi-alert-circle', 'mdi-wifi', 'mdi-access-point', 'mdi-antenna', ] const sizes = [ 'x-small', 'small', 'medium', 'large', 'x-large', ] const slots = computed(() => { return `` }) const code = computed(() => { return `<${name}${propsToString(props.value)}>${slots.value}</${name}>` }) </script>