[技巧]使用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>

---

效果图：

---

如果对你有所帮助，请随手点个赞，Coding不易~❤