vue+element+unocss 创建动态收缩菜单

知识要点

• unocss使用
• 动态菜单,可用于菜单权限分配
• provide/inject

unocss项目中配置

跟着官网基本都可以完成配置

• 中文网地址
  https://unocss.nodejs.cn/guide/
• 在vscode中安装 unocss,然后重启vscode

动态菜单

我这里用的elementPlus,其他框架原理都一样

<el-menu
	:unique-opened="true"
	background-color="#080D43"
	:collapse="obj.isCollapse"
	router
	active-text-color="#000"
	class="el-menu-vertical-demo border-0"
	:default-active="activeName"
	text-color="#fff"
	>
	<template v-for="item in menuList" :key="item.id">
	  <el-sub-menu :index="item.id" v-if="item.children && item.children.length > 0">
	    <template #title>
	      <svg class="icon" aria-hidden="true" style="width: 30px; height: 30px">
	        <use xlink:href="#icon-xiaoxi"></use>
	      </svg>
	      <span :class="obj.isCollapse ? '' : 'ml-5'">{{ item.menuName }}</span>
	    </template>
	    <el-menu-item
	      :index="subItem.id"
	      v-for="subItem in item.children"
	      :key="subItem.id"
	      :route="{ name: subItem.name }"
	    >
	      <svg class="icon" aria-hidden="true" style="width: 30px; height: 30px">
	        <use xlink:href="#icon-xiaoxi"></use>
	      </svg>
	      <span class="ml-5"> {{ subItem.menuName }}</span>
	    </el-menu-item>
	  </el-sub-menu>
	  <el-menu-item :index="item.id" :route="{ name: item.name }">
	    <svg class="icon" aria-hidden="true" style="width: 30px; height: 30px">
	      <use xlink:href="#icon-xiaoxi"></use>
	    </svg>
	    <span :class="obj.isCollapse ? '' : 'ml-5'"> {{ item.menuName }}</span>
	  </el-menu-item>
	</template>
</el-menu>

• 下边是菜单数据

import { ref, inject } from 'vue'
const obj: any = inject('obj')
const activeName = ref('1')
const menuList = ref([
  { id: '1', menuName: '工作台', name: 'Home', path: '/' },
  {
    id: '2',
    menuName: '物业管理',
    name: 'Manger',
    path: '/manger',
    children: [
      { id: '2-1', menuName: '房屋信息', name: 'Housing', path: '/manger/housing' },
      { id: '2-2', menuName: '业主信息', name: 'Housing', path: '/manger/housing' },
      { id: '2-3', menuName: '车辆信息', name: 'Housing', path: '/manger/housing' }
    ]
  }
])

provide/inject

因为我这里需要做一个菜单收缩伸展的功能,功能分的也比较细,所以采用了隔代传值

// 父组件
import { ref, provide, watch } from 'vue'
const obj = ref({
  name: 'ZCY',
  isCollapse: true
})
// 初始化标题
const changeObj = () => {
  if (obj.value.isCollapse) {
    obj.value.name = 'ZCY'
  } else {
    obj.value.name = 'ZCY物业管理系统'
  }
}
provide('obj', obj)

• 修改inject 传递的值

// 子组件
import { inject } from 'vue'
const obj: any = inject('obj')
const changeCollapse = () => {
  obj.value.isCollapse = !obj.value.isCollapse
}

• 当然我们也要对这个值进行观察,变化时候更改

// 父组件
import { ref, provide, watch } from 'vue'
const obj = ref({
  name: 'OKM',
  isCollapse: true
})
watch(
  () => obj.value.isCollapse,
  () => {
    changeObj()
  },
  { deep: true }
)
// 初始化标题
const changeObj = () => {
  if (obj.value.isCollapse) {
    obj.value.name = 'OKM'
  } else {
    obj.value.name = 'OKM物业管理系统'
  }
}