/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-carousel/usage.vue
62 строки
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> <v-carousel v-bind="props"> <v-carousel-item src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" cover ></v-carousel-item> <v-carousel-item src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" cover ></v-carousel-item> <v-carousel-item src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" cover ></v-carousel-item> </v-carousel> </div> </ExamplesUsageExample> </template> <script setup> const name = 'v-carousel' const model = ref('default') const options = ['Hide delimiters', 'Show arrows on hover'] const props = computed(() => { return { 'hide-delimiters': model.value === 'Hide delimiters' || undefined, 'show-arrows': model.value === 'Show arrows on hover' ? 'hover' : undefined, } }) const slots = computed(() => { return ` <v-carousel-item src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" cover ></v-carousel-item> <v-carousel-item src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" cover ></v-carousel-item> <v-carousel-item src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" cover ></v-carousel-item> ` }) const code = computed(() => { return `<${name}${propsToString(props.value)}>${slots.value}</${name}>` }) </script>