feature: [sidebar] add external-link (#991)

This commit is contained in:
花裤衩 2018-08-24 10:06:09 +08:00 committed by GitHub
parent 0e75dcc42a
commit 00d292f67e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 68 additions and 15 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

@ -60,7 +60,8 @@ export default {
exportZip: 'Export Zip',
theme: 'Theme',
clipboardDemo: 'Clipboard',
i18n: 'I18n'
i18n: 'I18n',
externalLink: 'External Link'
},
navbar: {
logOut: 'Log Out',

View File

@ -60,7 +60,8 @@ export default {
exportZip: 'Export Zip',
theme: '换肤',
clipboardDemo: 'Clipboard',
i18n: '国际化'
i18n: '国际化',
externalLink: '外链'
},
navbar: {
logOut: '退出登录',

View File

@ -322,5 +322,16 @@ export const asyncRouterMap = [
]
},
{
path: 'external-link',
component: Layout,
children: [
{
path: 'https://github.com/PanJiaChen/vue-element-admin',
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)">
<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}">
<svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
<span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{ generateTitle(onlyOneChild.meta.title) }}</span>
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="generateTitle(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="generateTitle(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">{{ generateTitle(item.meta.title) }}</span>
<item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" />
</template>
<template v-for="child in item.children" v-if="!child.hidden">
@ -19,8 +25,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">{{ generateTitle(child.meta.title) }}</span>
<item v-if="child.meta" :icon="child.meta.icon" :title="generateTitle(child.meta.title)" />
</el-menu-item>
</router-link>
</template>
@ -32,9 +37,12 @@
<script>
import path from 'path'
import { generateTitle } from '@/utils/i18n'
import { validateURL } from '@/utils/validate'
import Item from './Item'
export default {
name: 'SidebarItem',
components: { Item },
props: {
// route object
item: {
@ -71,11 +79,13 @@ 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)
},
generateTitle
}
}
</script>