feature: [sidebar] add external-link

This commit is contained in:
Pan 2018-08-24 10:42:37 +08:00
parent 85c5d60057
commit 61394e573e
4 changed files with 64 additions and 12 deletions

1
src/icons/svg/link.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1534846208920" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2941" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M912 1008.512H15.488V112h448.256v96H111.488v704.512H816V560.256h96z" p-id="2942"></path><path d="M918.208 37.888l67.904 67.904L545.984 545.92 478.08 478.08z" p-id="2943"></path><path d="M1007.168 310.656h-96V112h-208V16h304z" p-id="2944"></path></svg>

After

Width:  |  Height:  |  Size: 637 B

View File

@ -130,6 +130,17 @@ export const constantRouterMap = [
]
},
{
path: 'external-link',
component: Layout,
children: [
{
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
meta: { title: 'externalLink', icon: 'link' }
}
]
},
{ path: '*', redirect: '/404', hidden: true }
]

View File

@ -0,0 +1,29 @@
<script>
export default {
name: 'MenuItem',
functional: true,
props: {
icon: {
type: String,
default: ''
},
title: {
type: String,
default: ''
}
},
render(h, context) {
const { icon, title } = context.props
const vnodes = []
if (icon) {
vnodes.push(<svg-icon icon-class={icon}/>)
}
if (title) {
vnodes.push(<span slot='title'>{(title)}</span>)
}
return vnodes
}
}
</script>

View File

@ -1,17 +1,23 @@
<template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
<router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
<span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{ onlyOneChild.meta.title }}</span>
</el-menu-item>
</router-link>
<template v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow">
<a v-if="isExternalLink(onlyOneChild.path)" :href="onlyOneChild.path" target="blank">
apple
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="onlyOneChild.meta.title" />
</el-menu-item>
</a>
<router-link v-else :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="onlyOneChild.meta.title" />
</el-menu-item>
</router-link>
</template>
<el-submenu v-else :index="item.name||item.path">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
<span v-if="item.meta&&item.meta.title" slot="title">{{ item.meta.title }}</span>
<item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
</template>
<template v-for="child in item.children" v-if="!child.hidden">
@ -25,8 +31,7 @@
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
<span v-if="child.meta&&child.meta.title" slot="title">{{ child.meta.title }}</span>
<item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
</el-menu-item>
</router-link>
</template>
@ -37,9 +42,12 @@
<script>
import path from 'path'
import { validateURL } from '@/utils/validate'
import Item from './Item'
export default {
name: 'SidebarItem',
components: { Item },
props: {
// routejson
item: {
@ -76,8 +84,11 @@ export default {
}
return false
},
resolvePath(...paths) {
return path.resolve(this.basePath, ...paths)
resolvePath(routePath) {
return path.resolve(this.basePath, routePath)
},
isExternalLink(routePath) {
return validateURL(routePath)
}
}
}