Ant Design Vue 1.7.8 (vu2)自定义路由菜单图标
新建icon component:
<template> <svg t="1681699879367" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2329" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M643.456 409.056c20.448-48.64 84.864-204.256 84.864-237.248l0-129.76-436.384 0 0 129.76c0 33.088 64 189.664 83.968 237.696-99.392 49.472-167.872 151.776-167.872 270.336 0 166.848 135.264 302.112 302.112 302.112s302.112-135.264 302.112-302.112c0-118.944-68.896-221.536-168.8-270.816zM325.472 171.776l0-96.192 167.264 0 0 229.664 33.568 0 0-229.664 168.448 0 0 96.192c0 18.4-41.184 126.72-82.208 224.128-32.032-11.552-66.4-18.176-102.4-18.176-36.352 0-71.072 6.752-103.36 18.528-34.88-83.968-81.28-204.256-81.28-224.48zM510.112 948.384c-148.064 0-268.544-120.48-268.544-268.544s120.48-268.544 268.544-268.544c148.064 0 268.544 120.48 268.544 268.544s-120.48 268.544-268.544 268.544z" fill="#ffffff" p-id="2330"></path><path d="M510.112 478.432c-111.232 0-201.408 90.176-201.408 201.408s90.176 201.408 201.408 201.408c111.264 0 201.408-90.176 201.408-201.408s-90.144-201.408-201.408-201.408zM510.112 847.68c-92.544 0-167.84-75.296-167.84-167.84s75.296-167.84 167.84-167.84c92.576 0 167.84 75.296 167.84 167.84s-75.264 167.84-167.84 167.84z" fill="#ffffff" p-id="2331"></path></svg> </template> <script> export default { name: "MedalIcon" } </script>
d在路由配置中引用component:
import MedalIcon from '@/components/icon/MedalIcon.vue'; // 路由配置 const options = { routes: [ { path: 'medal-config', name: '勋章配置', meta: { icon: { component: MedalIcon, }, }, component: () => import('@/pages/system/medal-config'), }, ] }
修改menu.js中的renderIcon方法中, 增加代码:
renderIcon: function (h, icon, key) { if (this.$scopedSlots.icon && icon && icon !== 'none') { const vnodes = this.$scopedSlots.icon({icon, key}) vnodes.forEach(vnode => { vnode.data.class = vnode.data.class ? vnode.data.class : [] vnode.data.class.push('anticon') }) return vnodes } //自定义图标 start if (typeof icon === 'object' && icon.component) { return !icon || icon == 'none' ? null : h(Icon, {props: {component: icon.component}}) } //自定义图标 end return !icon || icon == 'none' ? null : h(Icon, {props: {type: icon}}) },
最终效果:
============ 欢迎各位老板打赏~ ===========
与本文相关的文章
- · 小程序可以绑定其它小程序吗?
- · vue3+vite+多环境发面到二级目录配置
- · 微信小程序防止事件穿透防止事件冒泡
- · 普通链接二维码跳转小程序
- · 解决flex-direction: column 之后元素宽度自动变为100%
- · vue/react/node/vite/npm/yarn build自动更新版本号
- · getVisitDistribution 访问来源定义(访问来源 key 对应关系)
- · TinyMCE工具栏配置详解
- · vue获取节点的父节点、兄弟节点、子节点
- · vue3+vite3实现路由自动化
- · h5吹气互动(利用recorderjs获取输入音量大小)
- · 使用html5-qrcode 扫描二维码(vue3)