分类目录

链接

2023 年 4 月
 12
3456789
10111213141516
17181920212223
24252627282930

近期文章

热门标签

新人福利,免费薅羊毛

现在位置:    首页 > 前端 > 正文
Ant Design Vue 1.7.8 (vu2)自定义路由菜单图标
前端 暂无评论 阅读(51)

新建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}})
        },

最终效果:

============ 欢迎各位老板打赏~ ===========

本文版权归Bruce's Blog所有,转载引用请完整注明以下信息:
本文作者:Bruce
本文地址:Ant Design Vue 1.7.8 (vu2)自定义路由菜单图标 | Bruce's Blog

发表评论

留言无头像?