Vue3+ant design 中根据字符串动态渲染Menu组件的icon图标

最新推荐文章于 2024-07-19 09:20:22 发布

又是一年冬_

最新推荐文章于 2024-07-19 09:20:22 发布

阅读量1.7k

点赞数 11

文章标签： vue.js javascript 前端 anti-design-vue

本文链接：https://blog.csdn.net/qq_34261285/article/details/135492809

版权

文章介绍了在AntDesign4+版本中，如何处理从后台获取的字符串形式的图标，通过字面量存储Icon组件并使用对象属性名在Vue路由中动态渲染的问题及解决方案。

摘要由CSDN通过智能技术生成

在ant design4+版本中 icon是组件的形式引用在Menu才当中需要使用h函数渲染，但是一般带有权限的往往是从后台获取的，而后台返回的icon字段大多是字符串，在而h函数无法直接渲染字符串形式的icon组件，解决这一问题。直接上代码。

引入需要用到的icon组件

import {
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
  SettingOutlined,
  ReloadOutlined,
  PicRightOutlined,
  FullscreenOutlined,
  BellOutlined,
  PoweroffOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";

用字面量存储起来

const AntdIcons = {
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
  SettingOutlined,
  ReloadOutlined,
  PicRightOutlined,
  FullscreenOutlined,
  BellOutlined,
  PoweroffOutlined,
  SearchOutlined,
}

路由的基本配置,假设从服务器得到的数据大致也是这个形式的。其中最主要的是iconName字段，需要根据字符串渲染组件。

 {
        path: "dashboard",
        name: "工作台",
        iconName: "DesktopOutlined",
        key: "dashboard",
        label: "工作台",
        meta: {
          auth: false,
        },
        component: () => import("@/views/dashboard.vue"),
      },

最重要的一部，在渲染图标的时候使用对象属性的形式访问即可。这里简略了部分代码，要记住引入图标后是使用字面量存储后再通过对象属性名的方式访问即可。

item.icon = () => h(AntdIcons[iconName]);

完整的渲染

onMounted(() => {
  //获取路由数据 这要根据自己获取到的数据进行调整
  const indexRoutes = router.options.routes[3].children;
  indexRoutes.map((item) => {
    delete item.component;
    delete item.meta;
    delete item.name;
    delete item.path;
    //获得图标名称
    const iconName = item.iconName
    //根据名称渲染
    item.icon = () => h(AntdIcons[iconName]);
    if (item.children) {
      //处理二级路由
      for (let i = 0; i < item.children.length; i++) {
        delete item.children[i].path;
        delete item.children[i].component;
        delete item.children[i].meta;
        delete item.children[i].name;
        delete item.children[i].icon;
        const iconName = item.children[i].iconName
        item.children[i].icon = () => h(AntdIcons[iconName]);
      }
    }
  });
  state.leftNavData = indexRoutes
});