vue-admin-template笔记（六）
文章目录
- Vue学习笔记（六）
- layout
- layout.js
- ResizeHandler.js
- nvabar.vue
- hamburger
- Breadcrumb
- AppMain.vue
- sidebar
- sidebaritem
- item
- link
- 总结
- 参考
Vue学习笔记（六）
学习vue-admin-template
https://github.com/PanJiaChen/vue-admin-template
这篇是该系列的收尾之篇，也是内容最多的一篇，主要是分析layout，路由最后一部分如下：
{
path: 'external-link',
component: Layout,
children: [
{
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
meta: { title: 'External Link', icon: 'link' }
}
]
},
{ path: '*', redirect: '/404', hidden: true }
逻辑很简单，但是需要分析一下组件layout。
layout
layout.js
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar class="sidebar-container"/>
<div class="main-container">
<navbar/>
<app-main/>
</div>
</div>
</template>
<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'Layout',
components: {
Navbar,
Sidebar,
AppMain
},
mixins: [ResizeMixin],
computed: {
sidebar() {
return this.$store.state.app.sidebar
},
device() {
return this.$store.state.app.device
},
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
}
},
methods: {
handleClickOutside() {
this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
}
}
}
</script>
新术语解释：
- mixins
类似面向对象的继承机制，定义一个基类，继承自基类，可以复用代码
参考：- 混入
小结：
- 导入页面组成部分，侧边菜单，导航栏，主页面。
- 混入具有响应式功能的基类，即可根据浏览器窗口大小来判断是否展示侧边菜单。
ResizeHandler.js
import store from '@/store'
const { body } = document
const WIDTH = 1024
const RATIO = 3
export default {
watch: {
$route(route) {
if (this.device === 'mobile' && this.sidebar.opened) {
store.dispatch('CloseSideBar', { withoutAnimation: false })
}
}
},
beforeMount() {
window.addEventListener('resize', this.resizeHandler)
},
mounted() {
const isMobile = this.isMobile()
if (isMobile) {
store.dispatch('ToggleDevice', 'mobile')
store.dispatch('CloseSideBar', { withoutAnimation: true })
}
},
methods: {
isMobile() {
const rect = body.getBoundingClientRect()
return rect.width - RATIO < WIDTH
},
resizeHandler() {
if (!document.hidden) {
const isMobile = this.isMobile()
store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
if (isMobile) {
store.dispatch('CloseSideBar', { withoutAnimation: true })
}
}
}
}
}
小结：
被layout混入的基类，实现自动适应屏幕大小的功能，主动是识别什么设备和是否关闭侧边菜单。
nvabar.vue
<template>
<el-menu class="navbar" mode="horizontal">
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
<breadcrumb />
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom"/>
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link class="inlineBlock" to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<el-dropdown-item divided>
<span style="display:block;" @click="logout">LogOut</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
export default {
components: {
Breadcrumb,
Hamburger
},
computed: {
...mapGetters([
'sidebar',
'avatar'
])
},
methods: {
toggleSideBar() {
this.$store.dispatch('ToggleSideBar')
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
}
}
}
</script>
小结：
- 定义了菜单栏的组成：一个汉堡栏、一个面包栏、一个下拉菜单
- 下拉菜单包含两项：主界面、登出操作
hamburger
<template>
<div>
<svg
:class="{'is-active':isActive}"
t="1492500959545"
class="hamburger"
style=""
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1691"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="64"
height="64"
@click="toggleClick">
<path
d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
p-id="1692" />
<path
d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
p-id="1693" />
<path
d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
p-id="1694" />
</svg>
</div>
</template>
<script>
export default {
name: 'Hamburger',
props: {
isActive: {
type: Boolean,
default: false
},
toggleClick: {
type: Function,
default: null
}
}
}
</script>
小结：
- 汉堡栏，是否显示侧边菜单的开关。
- 汉堡栏，主要是svg的描述参数看起来比较复杂。其中最复杂的就是path了，这个是svg中最强大的画图工具了，可以用来画出其他的形状。具体各种画图命令可以参考svg教程
- 注意这里点击绑定的函数没有进一步描述，从navbar.vue里可以看到，使用这个组件时，绑定新的函数。注意这里的prop命令是toggleClick，但是navbar.vue绑定时用的toggle-click。这个是因为html是大小写无关的，而js是有关的，html中的短连线法命令与prop里的驼峰法命名保持一致。
参考
- vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）
- prop
Breadcrumb
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
// 如果没有重定向或者是最后一个元素，则输出title就行
<router-link v-else :to="item.redirect||item.path">{{ item.meta.title }}</router-link>
// 如果有重定向或者有路由路径，则将其加上路由链接
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
import pathToRegexp from 'path-to-regexp'
export default {
data() {
return {
levelList: null
}
},
watch: {
$route() {
this.getBreadcrumb()
}
},
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb() {
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)
}
this.levelList = matched
}
}
}
</script>
小结：
- 使用element-ui的面包导航栏，对于有重定向或者路由的菜单添加了对应的路由链接，对相关代码做了注释。
AppMain.vue
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<!-- or name="fade" -->
<!-- <router-view :key="key"></router-view> -->
<router-view/>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
// key() {
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
// }
}
}
</script>
</style>
小结：
- 主页面的渲染载体，只需包含一个router-view元素即可，不同路由对应的组件都会在这个页面进行渲染展示。
sidebar
<template>
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:show-timeout="200"
:default-active="$route.path"
:collapse="isCollapse"
mode="vertical"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
>
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>
</el-menu>
</el-scrollbar>
</template>
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
export default {
components: { SidebarItem },
computed: {
...mapGetters([
'sidebar'
]),
routes() {
return this.$router.options.routes
},
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>
小结：
- 侧边菜单栏，根据路由文件传递相关属性给组件sidebarItem来进行渲染
sidebaritem
<template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
// 如果只有一个子菜单，就展示该菜单项即可，例如form和external link
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<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>
</app-link>
</template>
// 如果有多个子菜单，如example和nested，先展示父菜单
<el-submenu v-else :index="resolvePath(item.path)">
// 展示父菜单，这里的slot=title是element-ui里定义的具名slot
<template slot="title">
<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">
// 如果有子菜单，则递归展示sidebar-item
<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" />
// 否则展示为一个普通链接即可
<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>
</app-link>
</template>
</el-submenu>
</div>
</template>
<script>
import path from 'path'
import { isExternal } from '@/utils'
import Item from './Item'
import AppLink from './Link'
export default {
name: 'SidebarItem',
components: { Item, AppLink },
props: {
// route object
item: {
type: Object,
required: true
},
isNest: {
type: Boolean,
default: false
},
basePath: {
type: String,
default: ''
}
},
data() {
return {
onlyOneChild: null
}
},
methods: {
hasOneShowingChild(children, parent) {
const showingChildren = children.filter(item => {
if (item.hidden) {
return false
} else {
// Temp set(will be used if only has one showing child)
this.onlyOneChild = item
return true
}
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
return true
}
return false
},
resolvePath(routePath) {
if (this.isExternalLink(routePath)) {
return routePath
}
return path.resolve(this.basePath, routePath)
},
isExternalLink(routePath) {
return isExternal(routePath)
}
}
}
</script>
小结：
- 侧边菜单栏的菜单项，相关注意说明已经在代码中展示，虽然看起来很复杂，但是整个逻辑还是很简单的。可以多揣摩揣摩
item
<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>{(title)}</span>)
}
// console.log(vnodes)
return vnodes
}
}
</script>
小结：
- 根据父组件传过来的参数渲染两个组件，图标和标题
link
<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>
小结：
- 根据是外链还是内部链接，分别渲染为普通链接a或者router-link
总结
本篇是最后一篇笔记，将剩下的部分也都简单的分析了一下。整个vue-admin-template到此告一段落。整体来看，其实逻辑也不复杂，但是值得学习的细节挺多，向作者PanjiaChen致敬，也向vue作者尤雨溪致敬，前路漫漫，还要继续努力学习。加油！
参考
- 混入
- vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）
- prop