Skip to content

Commit 00d292f

Browse files
PanJiaChenPanJiaChen
authored
feature: [sidebar] add external-link (PanJiaChen#991)
1 parent 0e75dcc commit 00d292f

6 files changed

Lines changed: 68 additions & 15 deletions

File tree

‎src/icons/svg/link.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/lang/en.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ export default {
6060
exportZip: 'Export Zip',
6161
theme: 'Theme',
6262
clipboardDemo: 'Clipboard',
63-
i18n: 'I18n'
63+
i18n: 'I18n',
64+
externalLink: 'External Link'
6465
},
6566
navbar: {
6667
logOut: 'Log Out',

‎src/lang/zh.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ export default {
6060
exportZip: 'Export Zip',
6161
theme: '换肤',
6262
clipboardDemo: 'Clipboard',
63-
i18n: '国际化'
63+
i18n: '国际化',
64+
externalLink: '外链'
6465
},
6566
navbar: {
6667
logOut: '退出登录',

‎src/router/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,5 +322,16 @@ export const asyncRouterMap = [
322322
]
323323
},
324324

325+
{
326+
path: 'external-link',
327+
component: Layout,
328+
children: [
329+
{
330+
path: 'https://github.com/PanJiaChen/vue-element-admin',
331+
meta: { title: 'externalLink', icon: 'link' }
332+
}
333+
]
334+
},
335+
325336
{ path: '*', redirect: '/404', hidden: true }
326337
]

‎src/views/layout/components/Sidebar/Item.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script>
2+
export default {
3+
name: 'MenuItem',
4+
functional: true,
5+
props: {
6+
icon: {
7+
type: String,
8+
default: ''
9+
},
10+
title: {
11+
type: String,
12+
default: ''
13+
}
14+
},
15+
render(h, context) {
16+
const { icon, title } = context.props
17+
const vnodes = []
18+
19+
if (icon) {
20+
vnodes.push(<svg-icon icon-class={icon}/>)
21+
}
22+
23+
if (title) {
24+
vnodes.push(<span slot='title'>{(title)}</span>)
25+
}
26+
return vnodes
27+
}
28+
}
29+
</script>

‎src/views/layout/components/Sidebar/SidebarItem.vue‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
<template>
22
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
33

4-
<router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
5-
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
6-
<svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
7-
<span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{ generateTitle(onlyOneChild.meta.title) }}</span>
8-
</el-menu-item>
9-
</router-link>
4+
<template v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow">
5+
<a v-if="isExternalLink(onlyOneChild.path)" :href="onlyOneChild.path" target="blank">
6+
apple
7+
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
8+
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="generateTitle(onlyOneChild.meta.title)" />
9+
</el-menu-item>
10+
</a>
11+
<router-link v-else :to="resolvePath(onlyOneChild.path)">
12+
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
13+
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="generateTitle(onlyOneChild.meta.title)" />
14+
</el-menu-item>
15+
</router-link>
16+
</template>
1017

1118
<el-submenu v-else :index="item.name||item.path">
1219
<template slot="title">
13-
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
14-
<span v-if="item.meta&&item.meta.title" slot="title">{{ generateTitle(item.meta.title) }}</span>
20+
<item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" />
1521
</template>
1622

1723
<template v-for="child in item.children" v-if="!child.hidden">
1824
<sidebar-item v-if="child.children&&child.children.length>0" :is-nest="true" :item="child" :key="child.path" :base-path="resolvePath(child.path)" class="nest-menu"/>
1925

2026
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
2127
<el-menu-item :index="resolvePath(child.path)">
22-
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
23-
<span v-if="child.meta&&child.meta.title" slot="title">{{ generateTitle(child.meta.title) }}</span>
28+
<item v-if="child.meta" :icon="child.meta.icon" :title="generateTitle(child.meta.title)" />
2429
</el-menu-item>
2530
</router-link>
2631
</template>
@@ -32,9 +37,12 @@
3237
<script>
3338
import path from 'path'
3439
import { generateTitle } from '@/utils/i18n'
40+
import { validateURL } from '@/utils/validate'
41+
import Item from './Item'
3542
3643
export default {
3744
name: 'SidebarItem',
45+
components: { Item },
3846
props: {
3947
// route object
4048
item: {
@@ -71,11 +79,13 @@ export default {
7179
}
7280
return false
7381
},
74-
resolvePath(...paths) {
75-
return path.resolve(this.basePath, ...paths)
82+
resolvePath(routePath) {
83+
return path.resolve(this.basePath, routePath)
84+
},
85+
isExternalLink(routePath) {
86+
return validateURL(routePath)
7687
},
7788
generateTitle
7889
}
7990
}
8091
</script>
81-

0 commit comments

Comments
 (0)