[TOC] ## 技巧 ### v-list 高亮 v-list 可以通过 `active` 属性与路由的值自动设置高亮 ``` <v-list-item :active="route.name==menu.router_name" @click.stop="rediect(menu)"> <template v-slot:default="{isActive }"> <v-img :src="isActive?menu.icon_active:menu.icon" class="img-icon mx-auto"></v-img> <slot name="default"></slot> </template> </v-list-item> ``` ### v-menu 在列表中设置菜单 ``` // script const contextmenu = (event:MouseEvent,item: GroupItem) => { menuShow.value.x=event.x+ 10 + "px"; menuShow.value.y=event.y+ 10 + "px"; groupList.value.forEach((item1:GroupItem)=>{ item1.show_menu=(item1.group_id==item.group_id) }) } // html <v-list-item v-for="(item,key1) in groupList" @contextmenu.stop.prevent="contextmenu($event,item)" > <v-menu v-model="item.show_menu" :style="{top:menuShow.y,left:menuShow.x}"> <v-list density="compact" elevation="2"> <v-list-item @click="copy(item)">{{ $t('group_menu.send_group_message') }}</v-list-item> <v-list-item @click="copy(item)">{{ $t('group_menu.modify_group_card') }}</v-list-item> <v-list-item @click="copy(item)">{{ $t('group_menu.group_settings') }}</v-list-item> <v-list-item @click="copy(item)">{{ $t('group_menu.message_record') }}</v-list-item> <v-divider></v-divider> <v-list-item @click="copy(item)">{{ $t('group_menu.exit_group') }}</v-list-item> </v-list> </v-menu> ```