antdv侧边栏菜单使⽤⾃定义图⽚svg
renderIcon: function (h, icon, key) {
if (this.$scopedSlots.icon && icon && icon !== 'none') {
console.log(this.$scopedSlots);
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
} else if(icon && icon.includes('svg')) { // 使⽤svg图⽚时
return h('img', {style: {width: "20px", height: "20px", marginRight: "4px", marginBottom: "4px" }, attrs: {src: icon}})  } else {
return !icon || icon == 'none' ? null : h(Icon, {props: {type:  icon}})
}
},
路由：svg图
informList: {
path: 'informList',
name: '通知管理',
meta: {
icon: require('@/assets/img/svg/informWay.svg')
},
component: view.blank,
},
两种样式（⼀种还有⼦菜单，另⼀种⽆⼦菜单）
/deep/ .ant-menu-submenu-inline {
.ant-menu-submenu-title {
img{
filter: drop-shadow(rgba(254, 254, 254, 0.65) 100px 0);      transform: translateX(-100px);
}
}
}
/deep/ .ant-menu-submenu-selected {
.
ant-menu-submenu-title {
img{
filter: drop-shadow(#fff 100px 0);
transform: translateX(-100px);
}
}
}
// ⽆⼦菜单
/deep/ .ant-menu-item {
a {
img {
filter: drop-shadow(rgba(254, 254, 254, 0.65) 100px 0);      transform: translateX(-100px);
}
}
}
/deep/ .ant-menu-item-selected {
a {
img {
filter: drop-shadow(#1583FF 100px 0);
transform: translateX(-100px);
}
}
}
注：修改svg颜⾊两个属性
filter: drop-shadow(#1583FF 100px 0);
transform: translateX(-100px);
⼀个⼈的旅⾏，⼀个⼈的感受，⼀个⼈的收获

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。