要自定义 `
sidebar-item`，需要按照以下步骤进行：
1. 在 `NavMenu`
中定义 `
sidebar-item` 的模板，可以使用 `template` 或 `slot`。
2. 在 `
sidebar-item` 模板内部添加需要自定义的内容。
3. 使用 `item-scope` 作为 `
sidebar-item` 模板的参数，可以获取到该 `
sidebar-item` 的数据。
4. 使用 `$scopedSlots` 获取 `
sidebar-item` 的插槽，并渲染自定义内容。
以下是自定义 `
sidebar-item` 的示例代码：
```html
<template>
<div>
<el-nav-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
<template v-for="(item, index) in menuList">
<el-submenu v-if="item.children" :index="item.path" :key="index">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</template>
<el-menu-item v-for="(child, i) in item.children" :index="child.path" :key="i">{{ child.title }}</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="item.path" :key="index">
<!-- 定义
sidebar-item 的模板 -->
<template v-slot:default="itemScope">
<div class="
sidebar-item">
<i :class="itemScope.item.icon"></i>
<!-- 添加自定义内容 -->
<span>{{ itemScope.item.title }}</span>
<span class="count">{{ itemScope.item.count }}</span>
</div>
</template>
</el-menu-item>
</template>
</el-nav-menu>
</div>
</template>
<script>
import { mapState } from '
vuex';
export default {
name: '
SidebarMenu',
data() {
return {
activeIndex: '',
menuList: [
{
title: '首页',
path: '/',
icon: 'iconfont icon-home',
},
{
title: '文章',
path: '/article',
icon: 'iconfont icon-article',
count: 10,
children: [
{
title: '技术',
path: '/article/tech',
},
{
title: '生活',
path: '/article/life',
},
],
},
],
};
},
mounted() {
this.activeIndex = this.$route.path;
},
methods: {
handleSelect(index) {
this.activeIndex = index;
this.$router.push(index);
},
},
computed: {
...mapState(['menu']),
},
};
</script>
<style>
.
sidebar-item {
display: flex;
align-items: center;
}
.
sidebar-item i {
font-size: 14px;
margin-right: 10px;
}
.
sidebar-item span {
font-size: 14px;
margin-right: 10px;
}
.
sidebar-item .count {
background-color: #f56c6c;
color: #fff;
font-size: 12px;
padding: 0 4px;
border-radius: 8px;
}
</style>
```
在上面的示例
中，我们在 `
sidebar-item` 模板
中添加了一个计数器，用于显示文章数量。可以看到，我们使用 `itemScope` 获取到了当前 `
sidebar-item` 的数据，并使用 `$scopedSlots` 渲染了自定义内容。同时，我们还定义了一些样式，使得自定义内容更加美观。
2873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
