怕忘了，记录一下
Vue3 组件调用本身
创建temp.vue文件，调用自己
主要是 name 要设置一个唯一名称 如下的 CustumVue 然后直接调用
export default defineComponent({
name: 'CustumVue'
})
调用：
<custum-vue />
<template>
/* 主要是 name要设置一个唯一名称 如下的 CustumVue 然后直接调用 */
<custum-vue />
</template>
<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
name: 'CustumVue'
})
</script>
Element-Plus左侧菜单自动无限分级
首先菜单的格式如下：可能会从后端获取（如果不是已经处理好的结构需要递归处理一下，递归方法网上很，这里就不码了。）
[
{
id: 1,
path: '/Home',
name: 'Home',
component: () => import('xxxxxx'),
meta: {
title: '首页',
icon: 'Plus'
},
children: [
{
id: 10,
path: '/aaa',
name: 'aaaa',
component: () => import('xxxxxx'),
meta: {
title: 'aaaa',
icon: 'Plus'
},
children: [
......
]
}
......
]
}
......
]
创建sider.vue文件 (<c-menus />组件是关键)
// sider.vue
<template>
<el-scrollbar height="100%">
<el-menu
class="el-menu-vertical-demo"
:collapse="isCollapse"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
unique-opened
>
<c-menus v-for="i in menus" :key="i.name" :menus="i" />
</el-menu>
</el-scrollbar>
</template>
<script>
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import CMenus from './menus.vue'
export default defineComponent({
name: 'LayoutMenu',
components: { CMenus },
props: {
isCollapse: { type: Boolean, default: false }
},
setup () {
const store = useStore()
const menus = store.getters.menus
return {
menus
}
}
})
</script>
创建c-menus.vue文件 (这里的 <i>标签是因为我用的iconfont图标)
<template>
<el-sub-menu v-if="menus.children.length" :index="menus.name">
<template #title>
<i :class="'nxb ' + menus.icon" />
<span style="margin-left: 10px;">{{ menus.title }}</span>
</template>
<label v-if="menus.children.length >= 1">
/* 递归调用自己 */
<layout-menus v-for="i in menus.children" :key="i.id" :menus="i" />
</label>
</el-sub-menu>
<el-menu-item v-else :index="menus.name" @click="clickMenu(menus)">
<i :class="'nxb ' + menus.icon" style="margin-right: 10px;" />
<template #title>{{ menus.title }}</template>
</el-menu-item>
</template>
<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
name: 'LayoutMenus',
props: {
menus: {
type: Object,
require: true,
default: () => {}
}
},
setup () {
const router = useRouter()
const clickMenu = (menu) => {
router.push({
path: menu.path,
name: menu.name
})
}
return { clickMenu }
}
})
</script>
<style scoped>
</style>
