feat[Menu]: menu icon support el-icon
This commit is contained in:
parent
6831120a83
commit
e001dab7e0
|
@ -17,7 +17,11 @@ export default {
|
||||||
const vnodes = []
|
const vnodes = []
|
||||||
|
|
||||||
if (icon) {
|
if (icon) {
|
||||||
vnodes.push(<svg-icon icon-class={icon}/>)
|
if (icon.includes('el-icon')) {
|
||||||
|
vnodes.push(<i class={[icon, 'sub-el-icon']} />)
|
||||||
|
} else {
|
||||||
|
vnodes.push(<svg-icon icon-class={icon}/>)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (title) {
|
if (title) {
|
||||||
|
@ -27,3 +31,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sub-el-icon {
|
||||||
|
color: currentColor;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -25,7 +25,7 @@ import nestedRouter from './modules/nested'
|
||||||
* meta : {
|
* meta : {
|
||||||
roles: ['admin','editor'] control the page roles (you can set multiple roles)
|
roles: ['admin','editor'] control the page roles (you can set multiple roles)
|
||||||
title: 'title' the name show in sidebar and breadcrumb (recommend set)
|
title: 'title' the name show in sidebar and breadcrumb (recommend set)
|
||||||
icon: 'svg-name' the icon show in the sidebar
|
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
|
||||||
noCache: true if set true, the page will no be cached(default is false)
|
noCache: true if set true, the page will no be cached(default is false)
|
||||||
affix: true if set true, the tag will affix in the tags-view
|
affix: true if set true, the tag will affix in the tags-view
|
||||||
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
|
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
|
||||||
|
@ -197,7 +197,7 @@ export const asyncRoutes = [
|
||||||
name: 'Example',
|
name: 'Example',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'example',
|
title: 'example',
|
||||||
icon: 'example'
|
icon: 'el-icon-s-help'
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
|
@ -57,6 +57,11 @@
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sub-el-icon {
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-left: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
.el-menu {
|
.el-menu {
|
||||||
border: none;
|
border: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -105,6 +110,10 @@
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sub-el-icon {
|
||||||
|
margin-left: 19px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -118,6 +127,10 @@
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sub-el-icon {
|
||||||
|
margin-left: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
.el-submenu__icon-arrow {
|
.el-submenu__icon-arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -178,6 +191,10 @@
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
.sub-el-icon {
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-left: -2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nest-menu .el-submenu>.el-submenu__title,
|
.nest-menu .el-submenu>.el-submenu__title,
|
||||||
|
|
Loading…
Reference in New Issue