toesbieya
6 years ago
parent
1fbf5b8bbc
commit
998543eda0
Binary file not shown.
@ -0,0 +1,80 @@ |
||||
<script type="text/jsx"> |
||||
import jumpOnSelectMenuMixin from "@/layout/mixin/jumpOnSelectMenu" |
||||
|
||||
export default { |
||||
name: "RootMenu", |
||||
|
||||
mixins: [jumpOnSelectMenuMixin], |
||||
|
||||
props: { |
||||
//当前激活菜单的路径 |
||||
activeMenu: String, |
||||
//树形菜单数组 |
||||
menu: Array, |
||||
//是否在顶部菜单个数<=1时仍然渲染 |
||||
alwaysShow: Boolean |
||||
}, |
||||
|
||||
methods: { |
||||
onSelect(menu) { |
||||
const path = menu.fullPath |
||||
if (path === this.activeMenu) return |
||||
this.jumpOnSelectMenu(path, false) |
||||
} |
||||
}, |
||||
|
||||
render() { |
||||
//菜单点击时触发select事件，payload为菜单对象 |
||||
const {activeMenu, menu, alwaysShow} = this |
||||
if (!Array.isArray(menu) || menu.length <= 1 && !alwaysShow) return |
||||
return ( |
||||
<ul class="root-menu"> |
||||
{menu.map(i => { |
||||
const key = i.fullPath + i.meta.title |
||||
const className = {'root-menu-item': true, 'active': i.fullPath === activeMenu} |
||||
const icon = i.meta.icon |
||||
return ( |
||||
<li key={key} class={className} on-click={() => this.onSelect(i)}> |
||||
{icon && <v-icon icon={icon}/>} |
||||
{i.meta.title} |
||||
</li> |
||||
) |
||||
})} |
||||
</ul> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import "~@/asset/style/variables.scss"; |
||||
|
||||
.root-menu { |
||||
height: $nav-height; |
||||
line-height: $nav-height; |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
font-size: 14px; |
||||
color: #515a6e; |
||||
|
||||
&-item { |
||||
height: inherit; |
||||
border-bottom: 2px solid transparent; |
||||
float: left; |
||||
padding: 0 20px; |
||||
cursor: pointer; |
||||
transition: all .2s ease-in-out; |
||||
|
||||
> .icon { |
||||
margin-right: 6px; |
||||
vertical-align: -0.125em; |
||||
} |
||||
|
||||
&:hover, &.active { |
||||
color: $--color-primary; |
||||
border-bottom: 2px solid $--color-primary; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,20 @@ |
||||
import {isExternal} from "@/util/validate" |
||||
|
||||
export default { |
||||
methods: { |
||||
jumpOnSelectMenu(fullPath, refreshWhenSame = true) { |
||||
//外部链接时打开新窗口
|
||||
if (isExternal(fullPath)) { |
||||
return window.open(fullPath) |
||||
} |
||||
|
||||
//触发的菜单路径是当前路由时，根据参数判断是否进行刷新
|
||||
if (this.$route.path === fullPath) { |
||||
if (!refreshWhenSame) return |
||||
this.$store.commit('tagsView/delCachedView', this.$route) |
||||
this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath})) |
||||
} |
||||
else this.$router.push(fullPath) |
||||
} |
||||
} |
||||
} |
||||
@ -1,28 +0,0 @@ |
||||
//路由表：系统页面
|
||||
|
||||
const router = [ |
||||
{ |
||||
path: '/', |
||||
component: 'Layout', |
||||
children: [ |
||||
{ |
||||
path: 'index', |
||||
component: 'index/', |
||||
name: 'index', |
||||
meta: {title: '首页', affix: true, icon: 'svg-home', noAuth: true, sort: 0} |
||||
}, |
||||
{ |
||||
path: 'user', |
||||
name: 'userCenter', |
||||
component: 'userCenter/', |
||||
meta: {title: '个人中心', noCache: true, icon: 'svg-user', noAuth: true, hidden: true}, |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
path: 'https://doc.toesbieya.cn', |
||||
meta: {title: '文档', icon: 'svg-documentation', noAuth: true, sort: 1} |
||||
} |
||||
] |
||||
|
||||
export default router |
||||
@ -0,0 +1,18 @@ |
||||
//路由表：系统页面
|
||||
|
||||
const router = [ |
||||
{ |
||||
path: 'index', |
||||
component: 'index/', |
||||
name: 'index', |
||||
meta: {title: '首页', affix: true, icon: 'svg-home', noAuth: true, sort: 0} |
||||
}, |
||||
{ |
||||
path: 'user', |
||||
name: 'userCenter', |
||||
component: 'userCenter/', |
||||
meta: {title: '个人中心', noCache: true, icon: 'svg-user', noAuth: true, hidden: true}, |
||||
} |
||||
] |
||||
|
||||
export default router |
||||
@ -1,8 +1,7 @@ |
||||
/*路由表：消息中心*/ |
||||
|
||||
const router = { |
||||
path: '/message', |
||||
component: 'Layout', |
||||
path: 'message', |
||||
meta: {title: '消息中心', icon: 'svg-message', alwaysShow: true}, |
||||
children: [ |
||||
{ |
||||
@ -1,8 +1,7 @@ |
||||
/*路由表：采购管理*/ |
||||
|
||||
const router = { |
||||
path: '/purchase', |
||||
component: 'Layout', |
||||
path: 'purchase', |
||||
meta: {title: '采购管理', icon: 'svg-shopping', alwaysShow: true}, |
||||
children: [ |
||||
{ |
||||
@ -1,8 +1,7 @@ |
||||
/*路由表：销售管理*/ |
||||
|
||||
const router = { |
||||
path: '/sell', |
||||
component: 'Layout', |
||||
path: 'sell', |
||||
meta: {title: '销售管理', icon: 'svg-sell', alwaysShow: true}, |
||||
children: [ |
||||
{ |
||||
@ -1,8 +1,7 @@ |
||||
/*路由表：库存管理*/ |
||||
|
||||
const router = { |
||||
path: '/stock', |
||||
component: 'Layout', |
||||
path: 'stock', |
||||
meta: {title: '库存管理', icon: 'svg-stock', alwaysShow: true}, |
||||
children: [ |
||||
{ |
||||
@ -1,8 +1,7 @@ |
||||
/*路由表：系统管理*/ |
||||
|
||||
const router = { |
||||
path: '/system', |
||||
component: 'Layout', |
||||
path: 'system', |
||||
meta: {title: '系统管理', icon: 'svg-system', alwaysShow: true}, |
||||
children: [ |
||||
{ |
||||
@ -0,0 +1,12 @@ |
||||
/*顶级菜单：默认*/ |
||||
|
||||
import {context2array} from '@/router/util' |
||||
|
||||
const files = require.context('./child', false, /\.js$/) |
||||
|
||||
export default { |
||||
path: '/', |
||||
component: 'Layout', |
||||
meta: {title: '后台管理', icon: 'svg-home', sort: 0}, |
||||
children: context2array(files) |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
export default { |
||||
path: 'https://doc.toesbieya.cn', |
||||
meta: {title: '文档', icon: 'svg-documentation', noAuth: true} |
||||
} |
||||
@ -0,0 +1,36 @@ |
||||
export default { |
||||
path: 'component', |
||||
meta: {title: '组件', icon: 'el-icon-s-grid'}, |
||||
children: [ |
||||
{ |
||||
path: 'uploadExample', |
||||
component: 'example/component/upload', |
||||
meta: {title: '上传文件'} |
||||
}, |
||||
{ |
||||
path: 'skeletonExample', |
||||
component: 'example/component/skeleton', |
||||
meta: {title: '骨架屏'} |
||||
}, |
||||
{ |
||||
path: 'rippleExample', |
||||
component: 'example/component/ripple', |
||||
meta: {title: '波纹'} |
||||
}, |
||||
{ |
||||
path: 'signatureExample', |
||||
component: 'example/component/signature', |
||||
meta: {title: '手写签名'} |
||||
}, |
||||
{ |
||||
path: 'regionSelectorExample', |
||||
component: 'example/component/regionSelector', |
||||
meta: {title: '行政区划选择'} |
||||
}, |
||||
{ |
||||
path: 'treeSelectExample', |
||||
component: 'example/component/treeSelect', |
||||
meta: {title: '树选择'} |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
export default { |
||||
path: 'cool', |
||||
meta: {title: '好玩的东东', icon: 'el-icon-s-opportunity'}, |
||||
children: [ |
||||
{ |
||||
path: 'fluid', |
||||
component: 'example/cool/fluid', |
||||
meta: {title: '流体动画'} |
||||
}, |
||||
{ |
||||
path: 'l2d', |
||||
component: 'example/cool/l2d', |
||||
meta: {title: '看板娘'} |
||||
}, |
||||
] |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
export default { |
||||
path: 'icon', |
||||
component: 'example/icon/', |
||||
meta: {title: '图 标', icon: 'el-icon-eleme'} |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
export default { |
||||
path: 'iframe', |
||||
meta: {title: 'iframe', noCache: false, icon: 'el-icon-s-flag'}, |
||||
children: [ |
||||
{ |
||||
path: 'taobao', |
||||
meta: {title: '淘宝', iframe: 'https://www.taobao.com'} |
||||
}, |
||||
{ |
||||
path: 'baidu', |
||||
meta: {title: '百度', iframe: 'https://www.baidu.com'} |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
export default { |
||||
path: 'test', |
||||
meta: {title: '测试页面', icon: 'el-icon-warning'}, |
||||
children: [ |
||||
{ |
||||
path: 'develop', |
||||
component: 'example/test/develop/', |
||||
meta: {title: '开发测试'} |
||||
}, |
||||
{ |
||||
path: 'cache', |
||||
meta: {title: '详情页缓存测试', noCache: false}, |
||||
children: [ |
||||
{ |
||||
path: 'detailPage1', |
||||
component: 'example/test/cache/detail', |
||||
meta: { |
||||
title: '详情页1', |
||||
usePathKey: true, |
||||
commonModule: '@/view/example/test/cache/detailPage' |
||||
} |
||||
}, |
||||
{ |
||||
path: 'detailPage2', |
||||
component: 'example/test/cache/detail', |
||||
meta: { |
||||
title: '详情页2', |
||||
usePathKey: true, |
||||
commonModule: '@/view/example/test/cache/detailPage' |
||||
} |
||||
} |
||||
] |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
/*顶级菜单：演示用例*/ |
||||
|
||||
import {context2array} from '@/router/util' |
||||
|
||||
const files = require.context('./child', false, /\.js$/) |
||||
|
||||
export default { |
||||
path: '/example', |
||||
component: 'Layout', |
||||
meta: {title: '演示用例', icon: 'svg-show', noAuth: true, noCache: true}, |
||||
children: context2array(files) |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
import defaultRoot from './defaultRoot' |
||||
import exampleRoot from './exampleRoot' |
||||
import docRoot from './docRoot' |
||||
|
||||
export default [defaultRoot, exampleRoot, docRoot] |
||||
Loading…
Reference in new issue