Browse Source

feat: 菜单栏icon组件

lvkun996 3 năm trước cách đây
mục cha
commit
114fb4d812

+ 11 - 0
src/layout/components/Sidebar/Icon.tsx

@@ -0,0 +1,11 @@
+
+// import Icon, { FolderOpenOutlined } from '@ant-design/icons-vue'
+
+import Icon, * as Icons from '@ant-design/icons-vue'
+
+export default ({ name }: {name: string}) => {
+  console.log(name)
+  const _iconComponent = name ? Icons[name as keyof typeof Icons] : <></>
+
+  return _iconComponent ? <Icon component={_iconComponent} /> : null
+}

+ 3 - 4
src/layout/components/Sidebar/SidebarItem.vue

@@ -4,16 +4,14 @@
       v-if="hasOneShowingChild(item.children, item)"
     >
       <a-menu-item :key="item.path" @click="changeRoute(item)" >
-        <!-- <user-outlined /> -->
-        <!-- <  /> -->
-        <!-- {{item.icon}} -->
+        <Icon :name="item.icon"   />
         <span>{{item.name}}</span>
       </a-menu-item>
     </template>
 
       <a-sub-menu v-else :key="item.path" >
         <template #title>
-          <!-- <user-outlined /> -->
+          <Icon :name="item.icon"   />
           <span>
             {{item.name}}
           </span>
@@ -33,6 +31,7 @@ import path from 'path-browserify'
 import { reactive, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons-vue'
+import Icon from './Icon'
 
 const RootRouter = useRouter()
 const props = defineProps({

+ 3 - 1
src/router/index.ts

@@ -11,17 +11,18 @@ const routes: Array<ROUTER.RoutesProps> = [
       {
         path: '/dashboard',
         name: '首页',
-        icon: 'dashboard-outlined',
         component: () => import('@/pages/Iot/dashboard/deviceAccess/index.vue')
       },
       {
         path: '/product',
         name: '产品',
         redirect: '/product/index',
+        icon: 'DashboardOutlined',
         children: [
           {
             path: '/product/index',
             name: '产品',
+            icon: 'DashboardOutlined',
             component: () => import('@/pages/Iot/model/index.vue')
           },
           {
@@ -36,6 +37,7 @@ const routes: Array<ROUTER.RoutesProps> = [
         path: '/device',
         name: '设备',
         redirect: '/device/index',
+        icon: 'DashboardOutlined',
         children: [
           {
             path: '/device/index',