从0到1搭建Element的后台框架的方法步骤(5)

import showAside from "@/components/showAside.vue";//引入了一个侧边栏是否折叠的组件 export default { // name:'header', components: { showAside }, data() { return { fullscreen: false, name: "linxin", message: 2, username: "zyh" }; }, computed: { isCollapse: { get: function() { return this.$store.state.isCollapse; }, set: function(newValue) { console.log(newValue); this.$store.commit("IS_COLLAPSE", newValue);//提交到vuex } } }, methods: { toggleClick() { this.isCollapse = !this.isCollapse; }, // 用户名下拉菜单选择事件 logout(command) { this.$router.push("/login"); }, // 全屏事件 handleFullScreen() { let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } } this.fullscreen = !this.fullscreen; } } };

现在在 src/components文件夹下面新建一个 showAside.vue组件

<template> <div> <div @click="toggleClick"> <i></i> </div> </div> </template>

export default { name: "showAside", props: { toggleClick: { type: Function, default: null } } };

顶部导航栏标签组件

在 view/compentents文件夹下面新建一个 Tags.vue

<template> <!-- 打开标签的容器 --> <div> <ul> <li v-for="(item,index) in tagsList" :key="index" :class="{'active': isActive(item.path)}" > <router-link :to="item.path">{{item.title}}</router-link> <span @click="closeTags(index)"> <i></i> </span> </li> </ul> <div> <el-dropdown @command="handleCommand"> <el-button size="mini" type="primary"> 标签选项 <i></i> </el-button> <el-dropdown-menu size="small" slot="dropdown"> <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item> <!-- <el-dropdown-item command="all">关闭所有</el-dropdown-item> --> </el-dropdown-menu> </el-dropdown> </div> </div> </template>

import { messages } from "@/assets/js/common.js"; export default { created() { //判断标签里面是否有值 有的话直接加载 if (this.tagsList.length == 0) { this.setTags(this.$route); } }, computed: { //computed 方法里面没有set方法因此不能使用mapState,需要重新定义set方法 tagsList: { get: function() { return this.$store.state.tagsList; }, set: function(newValue) { this.$store.commit("TAGES_LIST", newValue); // this.$store.state.tagsList = newValue; } } }, watch: { //监听路由变化 $route(newValue, oldValue) { this.setTags(newValue); } }, methods: { //选中的高亮 isActive(path) { return path === this.$route.fullPath; }, handleCommand(command) { if (command == "closeOther") { // 关闭其他标签 const curItem = this.tagsList.filter(item => { return item.path === this.$route.fullPath; }); this.tagsList = curItem; } }, //添加标签 setTags(route) { let isIn = this.tagsList.some(item => { //判断标签是否存在 return item.path === route.fullPath; }); //不存在 if (!isIn) { // 判断当前的标签个数 if (this.tagsList.length >= 10) { messages("warning", "当标签大于10个，请关闭后再打开"); } else { this.tagsList.push({ title: route.meta.title, path: route.fullPath, name: route.name }); //存到vuex this.$store.commit("TAGES_LIST", this.tagsList); } } }, closeTags(index) { console.log(this.tagsList.length); if (this.tagsList.length == 1) { messages("warning", "不可全都关闭"); } else { //删除当前 let tags = this.tagsList.splice(index, 1); this.$store.commit("TAGES_LIST", this.tagsList); } } } };

接下来在 view/compentents文件夹下面新建一个 Main.vue,主要是将顶部导航标签栏以及内容部分结合起来。