织梦网站建设后优化步骤,邯郸注册公司,网站后期维护工作包括哪些,网络营销软件推广组件封装
为了避免组件代码的臃肿#xff0c;这里对主要的功能部件进行封装#xff0c;保证代码的模块化和简洁度。
组件结构
组件封装重构后#xff0c;试图组件结构如下图所示 代码一览
Home组件被简化#xff0c;包含导航、头部和主内容三个组件。
Home.vue te…组件封装
为了避免组件代码的臃肿这里对主要的功能部件进行封装保证代码的模块化和简洁度。
组件结构
组件封装重构后试图组件结构如下图所示 代码一览
Home组件被简化包含导航、头部和主内容三个组件。
Home.vue templatediv classcontainer!-- 导航菜单栏 --MenuBar/MenuBar!-- 头部区域 --HeadBar/HeadBar!-- 主内容区域 --Main/Main/div
/templatescript
import HeadBar from ./HeadBar/HeadBar
import MenuBar from ./MenuBar/MenuBar
import Main from ./Main/Main
export default {components:{HeadBar,MenuBar,Main}
};
/scriptstyle scoped langscss.container {position:absolute;top: 0px;left: 0px;right: 0px;background: #4b5f6e;}
/style HeadBar.vue template div classcontainer!-- 导航菜单隐藏显示切换 --span classcollapse-switcher click.preventcollapsei classel-icon-menu/i/span!-- 导航菜单 --span classnav-barel-menu :default-activeactiveIndex classel-menu-demo text-color#fffactive-text-color#ffd04b modehorizontal selectselectNavBar()el-menu-item index1 click$router.push(/){{$t(common.home)}}/el-menu-itemel-menu-item index2{{$t(common.doc)}}/el-menu-itemel-menu-item index3{{$t(common.msgCenter)}}/el-menu-item/el-menu/spanspan classtool-bar!-- 主题切换 --ThemePicker classtheme-picker/ThemePicker!-- 语言切换 --LangSelector classlang-selector/LangSelector !-- 用户信息 --el-dropdown classuser-info-dropdown triggerhoverspan classel-dropdown-linkimg :srcthis.userAvatar / {{username}}/spanel-dropdown-menu slotdropdownel-dropdown-item{{$t(common.myMsg)}}/el-dropdown-itemel-dropdown-item{{$t(common.config)}}/el-dropdown-itemel-dropdown-item divided click.nativelogout{{$t(common.logout)}}/el-dropdown-item/el-dropdown-menu/el-dropdown/span/div
/templatescript
import mock from /mock/index.js;
import ThemePicker from /components/ThemePicker
import LangSelector from /components/LangSelector
export default {components:{ThemePicker,LangSelector},data() {return {isCollapse: false,username: Louis,userAvatar: ,activeIndex: 1};},methods: {selectNavBar(key, keyPath) {console.log(key, keyPath)},// 语言切换handleCommand(command) {let array command.split(:)let lang array[0] ? zh_cn : array[0]let label array[1]document.getElementById(language).innerHTML labelthis.$i18n.locale lang},//折叠导航栏collapse: function() {this.isCollapse !this.isCollapse;},//退出登录logout: function() {var _this this;this.$confirm(确认退出吗?, 提示, {type: warning}).then(() {sessionStorage.removeItem(user);this.$router.push(/login);}).catch(() {});}},mounted() {this.sysName I like Kitty;var user sessionStorage.getItem(user);if (user) {this.userName user;this.userAvatar require(/assets/user.png);}}
};
/scriptstyle scoped langscss
.container {position: absolute;left: 200px;right: 0px;height: 60px;line-height: 60px;.collapse-switcher {width: 40px;float: left;cursor: pointer;border-color: rgba(111, 123, 131, 0.8);border-left-width: 1px;border-left-style: solid;border-right-width: 1px;border-right-style: solid;color: white;background: #504e6180;}.nav-bar {margin-left: auto;float: left;.el-menu {background: #504e6180;}}.tool-bar {float: right;.theme-picker {padding-right: 10px;}.lang-selector {padding-right: 10px;font-size: 15px;color: #fff;cursor: pointer;}.user-info-dropdown {font-size: 20px;padding-right: 20px;color: #fff;cursor: pointer;img {width: 40px;height: 40px;border-radius: 10px;margin: 10px 0px 10px 10px;float: right;}}}
}
/style MenuBar.vue templatediv classmenu-bar-container!-- logo --div classlogo :classisCollapse?menu-bar-collapse-width:menu-bar-widthimg :srcthis.logo / div{{isCollapse?:sysName}}/div/div!-- 导航菜单 --el-menu default-active1-1 :classisCollapse?menu-bar-collapse-width:menu-bar-width openhandleopen closehandleclose selecthandleselect :collapseisCollapseel-submenu index1template slottitlei classel-icon-location/ispan slottitle{{$t(sys.sysMng)}}/span/templateel-menu-item index1-1 click$router.push(user){{$t(sys.userMng)}}/el-menu-itemel-menu-item index1-2 click$router.push(dept){{$t(sys.deptMng)}}/el-menu-itemel-menu-item index1-3 click$router.push(role){{$t(sys.roleMng)}}/el-menu-itemel-menu-item index1-4 click$router.push(menu){{$t(sys.menuMng)}}/el-menu-itemel-menu-item index1-5 click$router.push(log){{$t(sys.logMng)}}/el-menu-item/el-submenuel-submenu index2template slottitlei classel-icon-location/ispan slottitle{{$t(sys.sysMonitor)}}/span/template/el-submenuel-menu-item index3 disabledi classel-icon-document/ispan slottitle{{$t(sys.nav3)}}/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle{{$t(sys.nv4)}}/span/el-menu-item/el-menu/div
/templatescript
export default {data() {return {isCollapse: false,sysName: ,logo: ,};},methods: {handleopen() {console.log(handleopen);},handleclose() {console.log(handleclose);},handleselect(a, b) {console.log(handleselect);}},mounted() {this.sysName I like Kitty;this.logo require(/assets/logo.png);}
};
/scriptstyle scoped langscss
.menu-bar-container {.el-menu {position:absolute;top: 60px;bottom: 0px;text-align: left;}.logo {position:absolute;top: 0px;height: 60px; line-height: 60px;background: #4b5f6e;img {width: 40px;height: 40px;border-radius: 0px;margin: 10px 10px 10px 10px;float: left;}div {font-size: 22px;color: white;text-align: left;}}.menu-bar-width {width: 200px;}.menu-bar-collapse-width {width: 65px;}
}
/style Main.vue templatediv classcontainerel-breadcrumb separator/ classbreadcrumbel-breadcrumb-item v-foritem in $route.matched :keyitem.patha hrefwww.baidu.com{{ item.name }}/a/el-breadcrumb-item/el-breadcrumbtransition namefade modeout-inrouter-view/router-view/transition/div
/templatescript
export default {data() {return {};},methods: {},mounted() {}
};
/scriptstyle scoped langscss
.container {position: absolute;top: 60px;bottom: 0px;left: 200px;right: 0px;.breadcrumb {padding: 10px; border-color: rgba(38, 86, 114, 0.2);border-bottom-width: 1px;border-bottom-style: solid;background: rgba(138, 158, 170, 0.2);}
}
/style 国际化语言切换也被封装成为了组件 LangSelector
LangSelector/index.js templateel-dropdown classlang-selector commandhandleCommandspan classel-dropdown-linkspan idlanguage中文/spani classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item commandzh_cn:中文中文/el-dropdown-itemel-dropdown-item commanden_us:EnglishEnglish/el-dropdown-item/el-dropdown-menu/el-dropdown
/templatescriptexport default {methods: {// 语言切换handleCommand(command) {let array command.split(:)let lang array[0] ? zh_cn : array[0]let label array[1]document.getElementById(language).innerHTML labelthis.$i18n.locale lang}}}
/script 组件封装重构之后同步修改路由配置 import Vue from vue
import Router from vue-router
import Login from /views/Login
import NotFound from /views/404
import Home from /views/Home
import Intro from /views/Intro
import User from /views/SysMng/User
import Dept from /views/SysMng/Dept
import Role from /views/SysMng/Role
import Menu from /views/SysMng/Menu
import Log from /views/SysMng/LogVue.use(Router)const router new Router({routes: [{path: /,name: 首页,component: Home,children: [{ path: , component: Intro, name: 系统介绍 },{ path: /user, component: User, name: 用户管理 },{ path: /dept, component: Dept, name: 机构管理 },{ path: /role, component: Role, name: 角色管理 },{ path: /menu, component: Menu, name: 菜单管理 },{ path: /log, component: Log, name: 日志管理 }]},{path: /login,name: 登录,component: Login},{path: /404,name: notFound,component: NotFound}]
})router.beforeEach((to, from, next) {// 登录界面登录成功之后会把用户信息保存在会话// 存在时间为会话生命周期页面关闭即失效。let user sessionStorage.getItem(user);if (to.path /login) {// 如果是访问登录界面如果用户会话信息存在代表已登录过跳转到主页if(user) {next({ path: / })} else {next()}} else {// 如果访问非登录界面且户会话信息不存在代表未登录则跳转到登录界面if (!user) {next({ path: /login })} else {next()}}
})export default router 测试效果
封装重构之后启动界面效果跟之前差别不大。
