/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-highlight/usage.vue
55 строк
2 KB
J-Sek
feat(VHighlight): add new component (#22817)
16 май 2026, 01:51
Не верифицирован
16 май 2026, 01:51
181bf89
Код
Авторство
О чём код?
<template> <ExamplesUsageExample v-model="model" :code="code" :name="name" :options="options" > <v-container max-width="550"> <v-text-field v-model="query" class="mb-5" density="compact" label="Search" variant="outlined" clearable hide-details ></v-text-field> <v-highlight v-bind="props" class="text-body-1" ></v-highlight> </v-container> <template v-slot:configuration> <v-select v-model="color" :items="colors" label="Color" clearable></v-select> <v-checkbox v-model="matchAll" label="Match all"></v-checkbox> <v-checkbox v-model="ignoreCase" label="Ignore case"></v-checkbox> </template> </ExamplesUsageExample> </template> <script setup> const name = 'v-highlight' const model = shallowRef('default') const options = [] const query = shallowRef('framework') const matchAll = shallowRef(false) const ignoreCase = shallowRef(false) const color = shallowRef() const colors = ['primary', '#ac46ff', 'orange-darken-2'] const text = 'Vue is a progressive JavaScript framework for building user interfaces. Unlike monolithic frameworks, Vue is designed to be incrementally adoptable. The core library focuses on the view layer only, making it easy to integrate with other libraries. Thousands of companies use Vue in production today.' const props = computed(() => ({ text, query: query.value || undefined, matchAll: matchAll.value || undefined, ignoreCase: ignoreCase.value || undefined, color: color.value || undefined, tag: 'p', })) const code = computed(() => `<${name}${propsToString(props.value)} />`) </script>