在vue中使用自定义图标渲染动态路由菜单

最新推荐文章于 2024-10-11 17:27:02 发布

是小芬达啊

最新推荐文章于 2024-10-11 17:27:02 发布

阅读量1.6k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_52921391/article/details/116459504

版权

在使用antd+vue构建项目时，如果内置图标不满足需求，可以自定义组件来实现图标替换。通过下载图标并以img标签形式在组件内引用，利用require引入本地图片。在父组件中，可以通过传入不同的`type`属性来动态改变图标。这样就能像使用antd图标一样方便地使用自定义图标了。

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

最近做项目，使用antd+vue构建项目
使用antdv的图标比较简单
加上type的字符串就行了

<a-icon type="down" />

动态渲染路由菜单就是这样，只要改变type就行了

<a-menu
        theme="light"
        mode="inline"
        :selectedKeys="[this.$route.path]"
        :defaultOpenKeys="[defaultOpenKeys]"
      >
        <a-sub-menu v-for="item in layout" :key="item.path">
          <span slot="title">
            <a-icon :type="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </span>
          <a-menu-item v-for="child in item.children" :key="child.path">
            <router-link :to="child.path">{{ child.meta.title }}</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>

那么antd的图标不是自己想要的怎么办
如果是单独使用，可以直接下载自己想要的图片用img标签替换图标就好了
如果是动态路由菜单的渲染想和antd的用法一样改变type怎么办
也容易，写自定义组件

首先去iconfont下载你想用的图标保存为图片，也可以和ui小姐姐要
我是ui给的图
直接贴代码吧，因为是本地图片，所以用require引入

//自定义组件,type是图片的名字，所以在父组件中使用自定义组件时type的名字要和图片的名字保持一致
<template>
  <div>
    <div class="my-icon">
      <img :src="require('@/assets/images/' + type + '.png')" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    type: String,
  },
};
</script>

<style scoped>
.my-icon {
  width: 20px;
  height: 20px;
}
.my-icon img {
  width: 100%;
  height: 100%;
}
</style>

然后在组件里使用，就可以实现和antd图标一样的用法啦

<template>
  <div>
    <div>
      <!-- 使用自定义图标 -->
      <my-icon type="home"></my-icon>
    </div>
  </div>
</template>

<script>
import MyIcon from "@/components/MyIcon.vue";
export default {
  components: {
    MyIcon,
  },
};
</script>

<style scoped></style>