THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

Browse Source

feat[Menu]: menu icon support el-icon(#3048)

pull/3251/head
Cat73 4 months ago
committed by GitHub
parent
commit
fc68f56d13
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 4 deletions
  1. +13
    -1
      src/layout/components/Sidebar/Item.vue
  2. +3
    -3
      src/router/index.js
  3. +17
    -0
      src/styles/sidebar.scss

+ 13
- 1
src/layout/components/Sidebar/Item.vue View File

@ -17,7 +17,11 @@ export default {
const vnodes = []
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) {
@ -27,3 +31,11 @@ export default {
}
}
</script>
<style scoped>
.sub-el-icon {
color: currentColor;
width: 1em;
height: 1em;
}
</style>

+ 3
- 3
src/router/index.js View File

@ -25,7 +25,7 @@ import nestedRouter from './modules/nested'
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
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)
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)
@ -197,14 +197,14 @@ export const asyncRoutes = [
name: 'Example',
meta: {
title: 'Example',
icon: 'example'
icon: 'el-icon-s-help'
},
children: [
{
path: 'create',
component: () => import('@/views/example/create'),
name: 'CreateArticle',
meta: { title: 'Create Article', icon: 'edit' }
meta: { title: 'Create Article', icon: 'el-icon-s-help' }
},
{
path: 'edit/:id(\\d+)',

+ 17
- 0
src/styles/sidebar.scss View File

@ -57,6 +57,11 @@
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
.el-menu {
border: none;
height: 100%;
@ -105,6 +110,10 @@
.svg-icon {
margin-left: 20px;
}
.sub-el-icon {
margin-left: 19px;
}
}
}
@ -118,6 +127,10 @@
margin-left: 20px;
}
.sub-el-icon {
margin-left: 19px;
}
.el-submenu__icon-arrow {
display: none;
}
@ -178,6 +191,10 @@
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
}
.nest-menu .el-submenu>.el-submenu__title,

Loading…
Cancel
Save