Неизвестное имя слота v-slot:item в Vuetify v-breadcrumb
Я использую vue3 и vuetify для создания веб-сайта и пытаюсь понять, как сделать меню хлебных крошек.
Что я пытаюсь сделать, так это сделать меню хлебных крошек похожим на толстые стрелки, но нигде в документации я не нашел, как... Стрелки в примерах не охватывают все меню, и они слишком маленькие. Также я попытался настроить элементы, как в примере, который я видел, но когда я наводил курсор на «элемент» в v-slot: item, он говорит: «Нераспознанное имя слота», и никаких изменений не происходит... Может ли кто-нибудь помочь мне, пожалуйста?
Пока мой код такой:
<template>
<v-breadcrumbs :items = "items">
<template v-slot:item = "{ item }">
<v-breadcrumbs-item slot = "item">
<span :style = "'color:green'">{{ item.text.toUpperCase() }} </span>
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
</template>
<script>
export default {
name: "MyVueWebsite",
data: function () {
return {
items:[
{
title:'crumbmenu 1',
disabled:false,
href:'faa'
},{
title:'crumbmenu 2',
disabled:false,
href:'foo'
},{
title:'crumbmenu 3',
disabled:false,
href:'fii'
},
]
}
}
}
</script>
Ответы 1
Да, похоже, это ошибка в документах Vuetify 3. В Vuetify 3 больше нет слота item, только слот title, который передается каждому из v-breadcrumb-item:
<v-breadcrumbs :items = "items">
<template v-slot:title = "{ item, index }">
<span :style = "{color:'green'}">{{ item.title.toUpperCase() }} </span>
</template>
</v-breadcrumbs>
Используйте слот divider, если вы хотите использовать стрелки (или что-то еще) между хлебными крошками:
<v-breadcrumbs :items = "items">
<template v-slot:divider = "{ item, index }">
<v-icon>mdi-arrow-right</v-icon>
</template>
</v-breadcrumbs>
Вот это во фрагменте:
const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
data: function() {
return {
items: [{
title: 'crumbmenu 1',
disabled: false,
href: 'faa'
}, {
title: 'crumbmenu 2',
disabled: false,
href: 'foo'
}, {
title: 'crumbmenu 3',
disabled: false,
href: 'fii'
},
]
}
}
}
createApp(app).use(vuetify).mount('#app')<link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" />
<link href = "https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel = "stylesheet">
<div id = "app">
<v-app>
<v-main>
<v-breadcrumbs :items = "items">
<template v-slot:title = "{ item, index }">
<span :style = "{color:'green'}">{{ item.title.toUpperCase() }} </span>
</template>
<template v-slot:divider = "{ item, index }">
<v-icon>mdi-arrow-right</v-icon>
</template>
</v-breadcrumbs>
</v-main>
</v-app>
</div>
<script src = "https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>Что касается стрелки, то простое решение — отрегулировать высоту элементов и вставить треугольник в разделитель. Взгляните на фрагмент:
const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
data: function() {
return {
items: [{
title: 'active item',
disabled: false,
active: true,
href: 'faa'
}, {
title: 'disabled item',
disabled: true,
href: 'foo'
}, {
title: 'regular item',
disabled: false,
href: 'fii'
},
]
}
}
}
createApp(app).use(vuetify).mount('#app'):root{
--d-height: 38px;
--bc-color: cadetblue;
}
.v-breadcrumbs-item{
height: var(--d-height);
}
.v-breadcrumbs-item.v-breadcrumbs-item--active{
--bc-color: orange;
color: white;
}
.arrow-body{
background: var(--bc-color);
line-height: var(--d-height);
padding: 0 8px;
}
.arrow-head{
--half-height: calc(var(--d-height) / 2);
width: 0;
height: 0;
border-top: var(--half-height) solid transparent;
border-bottom: var(--half-height) solid transparent;
border-left: var(--half-height) solid var(--bc-color);
}
.v-breadcrumbs .v-breadcrumbs-divider{
padding: 0;
}<link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href = "https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel = "stylesheet">
<div id = "app">
<v-app>
<v-main>
<v-breadcrumbs :items = "items">
<template v-slot:title = "{ item, index }">
<div class = "arrow-body">{{ item.title.toUpperCase() }} </div><div class = "arrow-head"></div>
</template>
<template v-slot:divider = "{ item, index }"></template>
</v-breadcrumbs>
</v-main>
</v-app>
</div>
<script src = "https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>Вам нужно будет посмотреть на реактивность, и в целом я не уверен, достаточно ли этого для вашего варианта использования. В Интернете есть множество шаблонов для хлебных крошек со стрелками, если вам нужно более тщательное решение, вам, вероятно, лучше создать свой собственный компонент, чем навязывать его v-breadcrumbs.
Хм, я добавил простое решение для стрелок, не уверен, что оно сработает для вас.
Это прекрасно работает! Я посмотрю, смогу ли я настроить его так, чтобы он больше походил на то, как он выглядит по этой ссылке, но это уже очень хорошо. Спасибо!
хорошо, теперь, когда я пытаюсь использовать параметр disabled, если для него установлено значение true, то меню выглядит странно ^^'. Также может быть способ пометить один из элементов как «выбранный», чтобы он имел другой цвет, чем другие?
Вы можете втянуть наконечник стрелки в элемент, чтобы он имел тот же стиль, что и тело стрелки. Для выбора есть класс v-breadcrumbs-item--active которым вы можете воспользоваться. Взгляните на обновленный фрагмент
Спасибо! Они действительно должны исправить свою документацию ^^'. Также да, я хочу использовать стрелки, но не те, я хочу, чтобы мое меню выглядело так: csscodelab.com/responsive-breadcrumb-wrapping-arrow знаете, как это сделать, не устанавливая ничего другого?