前言
记录一下自己初学vuetify的一些心得。
在官方文档中虽然有个简单的切换卡片的例子,但对于初学者来说可能过于难懂。于是自己踩过许多坑之后总结了一些关键点,希望对后来的一些初学者有帮助。
代码
template
<template>
<div>
<!-- 以下属性按行解释
1、按下调用的方法,将子组件(即列表元素)改变同步到active中
2、列表物品
3、可点击并发生相应事件
4、过渡动画
5、悬浮特效
-->
<v-treeview
:active.sync="active"
:items="items"
activatable
open-on-click
transition
hoverable
>
</v-treeview>
<!-- 切换效果-->
<v-scroll-y-transition mode="out-in">
<!-- 没有选择时显示-->
<div v-if="!selected">nothing selected</div>
<!-- 显示选择的卡片-->
<v-card v-else :key="selected.id">
<v-card-title>{{selected.name}}</v-card-title>
</v-card>
</v-scroll-y-transition>
</div>
</template>
上面写了一个拥有两个列表项的treeview和一个展示框。当没有选择时会显示div里面的内容,一旦选择了某个列表项就会在卡片中显示该选项的name。
script
<script>
export default {
data: () => ({
active: [],
items:[
{id:1,name:'card1'},{id:2,name:'card2'}
]
}),
computed: {
selected() {
if (!this.active.length) return undefined
const id = this.active[0]
return this.items.find(item => item.id === id)
},
}
}
</script>
active用于储存选中项的信息,在treeview选中后会同步到此处。
items是列表元素
computed计算属性中selected在每次调用都会获取active中与选中项相同id的元素。
在template中通过:key="selected.id"来获取选中项的id并实现切换,关于:key可参考vuefity中tab组件的使用。
效果图