/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-card/usage.vue
68 строк
2 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> <v-card v-bind="props"> <template v-slot:text> Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! </template> <v-card-actions v-if="actions"> <v-btn>Click me</v-btn> </v-card-actions> </v-card> </div> <template v-slot:configuration> <v-checkbox v-model="title" label="Show title"></v-checkbox> <v-checkbox v-model="subtitle" label="Show subtitle"></v-checkbox> <v-checkbox v-model="actions" label="Show actions"></v-checkbox> <v-checkbox v-model="loading" label="Loading"></v-checkbox> </template> </ExamplesUsageExample> </template> <script setup> const name = 'v-card' const model = ref('default') const actions = ref(false) const loading = ref(false) const subtitle = ref(false) const title = ref(false) const options = ['outlined', 'tonal'] const props = computed(() => { return { loading: loading.value || undefined, title: title.value ? 'Card title' : undefined, subtitle: subtitle.value ? 'Subtitle' : undefined, text: '...', variant: ['outlined', 'tonal'].includes(model.value) ? model.value : undefined, } }) const slots = computed(() => { let str = '' if (actions.value) { str += ` <v-card-actions> <v-btn>Click me</v-btn> </v-card-actions> ` } return str }) const code = computed(() => { return `<${name}${propsToString(props.value)}>${slots.value}</${name}>` }) </script>