[技巧]使用vue3開發2x.antdv路由動態加載菜單圖標的解決方案

2x.antdv圖標的使用方式

用法很少說，按需從@ant-design/icons導入，官網通道

import { LinkOutlined } from '@ant-design/icons-vue';

1x.antdv的用法以下

<a-icon slot="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>

相比1x.antdv，咱們能夠經過type來動態控制，那若是2.x版本我也要動態加載圖呢？像下面這樣寫？太low了吧😱

<MenuUnfoldOutlined
    v-if="collapsed"
  />
  <MenuFoldOutlined v-else />

大概寫一個後臺佈局，按照官方給的demo，須要以下編碼：

<template>
    <Layout>
      <Slider>
        <Menu>
          <Item>
            <DashboardOutlined />  
            <span>控制檯</span>
           </Item>
        </Menu>
      </Slider>
      <Layout>
        <Header />
        <Content />
        <Footer />
      </Layout>
    </Layout>
</template>
<script lang="ts">
import { defineComponent,reactive,ref,watchEffect } from 'vue'
import { DashboardOutlined } from '@ant-design/icons-vue';
import { Layout,Menu } from 'ant-design-vue';
const {Slider,Header,Content,Footer} = Layout;
const {Item} = Menu;

export default defineComponent({
  components:{
    Layout,
    Sider,
    Menu,
    Item,
    Header,
    Conetnt,
    Footer,

    DashboardOutlined,
  },
  setup() {}
})
</script>

這裏圖標是寫死的，那要怎麼樣像1.x同樣動態加載呢？

第一步：寫一個ICON自定義組件

// ICON.ts
import { createVNode } from 'vue'
import  * as $Icon from '@ant-design/icons-vue'

export const Icon = (props: { icon: string }) => {
  const { icon } = props;
  return createVNode($Icon[icon]);
};

這樣，就能夠使用動態ICON了，具體用法：

<template>
 <div>
   <Icon :icon="icon" />
 </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
import { Icon } from './ICON.ts'
export default defineComponent({
    components:{
        Icon
    },
    setup(){
        const icon = ref('DashboardOutlined');
        return {
          icon
        }
    }
})
</script>

這樣，就能夠配合router.ts來動態控制左側導航菜單的圖標了！大功告成😜

// router.ts 
export const routes: Array<IRouteProps> = [{
  path: '/',
  name: 'Home',
  redirect: '/index',
  component: BasicLayout,
  meta: { title: '工做臺', icon: 'DashboardOutlined' },
  children: [{
    path: '/index',
    name: 'Dashboard',
    meta: { title: '工做臺', icon: 'LineChartOutlined' },
    component: () => import('@/views/Dashboard/Home.vue'),
  }]
}]

// 控制一級或二級菜單
<SubMenu :key="route.path">
    <template #title>
      <Icon :icon="route.meta.icon" />
      <span>{{ route.meta.title }}</span>
    </template>
    <template v-for="child in route.children" :key="child.path">
      <router-link :to="child.path">
        <Item :key="child.path">
          <Icon :icon="child.meta.icon" />
          <span>{{ child.meta.title }}</span>
        </Item>
      </router-link>
    </template>
  </SubMenu>

---

效果圖：

---

若是對你有所幫助，請隨手點個贊，碼字不易~❤