dongzeliang
/
vue-admin-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into vue-cli

vue-cli
Pan 2018-10-24 18:03:09 +08:00
parent 9cb8f2de32 364ee5fee7
commit 8db76f7bae
9 changed files with 95 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README-zh.md
View File

@ -81,6 +81,14 @@ externals: {
**[对应分支](https://github.com/PanJiaChen/vue-admin-template/tree/element-ui-cdn)**
## Browsers support
Modern browsers and Internet Explorer 10+.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
## License
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.

8
README.md
View File

@ -73,6 +73,14 @@ Pictured:
**[Branch](https://github.com/PanJiaChen/vue-admin-template/tree/element-ui-cdn)**
## Browsers support
Modern browsers and Internet Explorer 10+.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
## License
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.

1
package.json
View File

@ -27,6 +27,7 @@
"@vue/cli-plugin-eslint": "3.0.3",
"@vue/cli-service": "3.0.3",
"node-sass": "^4.9.3",
"path-to-regexp": "2.4.0",
"sass-loader": "7.1.0",
"script-ext-html-webpack-plugin": "2.0.1",
"svg-sprite-loader": "3.8.0",

12
src/components/Breadcrumb/index.vue
View File

@ -10,6 +10,8 @@
</template>
<script>
import pathToRegexp from 'path-to-regexp'
export default {
data() {
return {
@ -26,7 +28,15 @@ export default {
},
methods: {
getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name)
const { params } = this.$route
let matched = this.$route.matched.filter(item => {
if (item.name) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
var toPath = pathToRegexp.compile(item.path)
item.path = toPath(params)
return true
}
})
const first = matched[0]
if (first && first.name !== 'dashboard') {
matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)

11
src/styles/sidebar.scss
View File

@ -47,6 +47,9 @@
height: 100%;
width: 100% !important;
}
.is-active > .el-submenu__title{
color: #f4f4f5!important;
}
}
.hideSidebar {
.sidebar-container {
@ -120,3 +123,11 @@
}
}
}
.el-menu--vertical{
& >.el-menu{
.svg-icon{
margin-right: 16px;
}
}
}

4
src/utils/index.js
View File

@ -68,3 +68,7 @@ export function formatTime(time, option) {
)
}
}
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}

39
src/views/layout/components/Sidebar/Link.vue 100644
View File

@ -0,0 +1,39 @@
<template>
<!-- eslint-disable vue/require-component-is-->
<component v-bind="linkProps(to)">
<slot/>
</component>
</template>
<script>
import { isExternal } from '@/utils'
export default {
props: {
to: {
type: String,
required: true
}
},
methods: {
isExternalLink(routePath) {
return isExternal(routePath)
},
linkProps(url) {
if (this.isExternalLink(url)) {
return {
is: 'a',
href: url,
target: '_blank',
rel: 'noopener'
}
}
return {
is: 'router-link',
to: url
}
}
}
}
</script>

27
src/views/layout/components/Sidebar/SidebarItem.vue
View File

@ -2,14 +2,14 @@
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
<app-link :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||item.meta.icon" :title="onlyOneChild.meta.title" />
</el-menu-item>
</a>
</app-link>
</template>
<el-submenu v-else :index="item.name||item.path">
<el-submenu v-else :index="resolvePath(item.path)">
<template slot="title">
<item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
</template>
@ -22,11 +22,11 @@
:key="child.path"
:base-path="resolvePath(child.path)"
class="nest-menu" />
<a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
<app-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
</el-menu-item>
</a>
</app-link>
</template>
</el-submenu>
@ -35,12 +35,13 @@
<script>
import path from 'path'
import { validateURL } from '@/utils/validate'
import { isExternal } from '@/utils'
import Item from './Item'
import AppLink from './Link'
export default {
name: 'SidebarItem',
components: { Item },
components: { Item, AppLink },
props: {
// route object
item: {
@ -87,17 +88,13 @@ export default {
return false
},
resolvePath(routePath) {
if (this.isExternalLink(routePath)) {
return routePath
}
return path.resolve(this.basePath, routePath)
},
isExternalLink(routePath) {
return validateURL(routePath)
},
clickLink(routePath, e) {
if (!this.isExternalLink(routePath)) {
e.preventDefault()
const path = this.resolvePath(routePath)
this.$router.push(path)
}
return isExternal(routePath)
}
}
}

2
src/views/layout/components/Sidebar/index.vue
View File

@ -9,7 +9,7 @@
text-color="#bfcbd9"
active-text-color="#409EFF"
>
<sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"/>
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>
</el-menu>
</el-scrollbar>
</template>