网站建设方案计划书人员规划,网站开发建模工具,wordpress 主页设置,wordpress加载慢Vue2项目练手——通用后台管理项目 首页组件布局面包屑tag面包屑使用组件使用vuex存储面包屑数据src/store/tab.jssrc/components/CommonAside.vuesrc/components/CommonHeader.vue tag使用组件文件目录CommonTag.vueMain.vuetabs.js 用户管理页新增功能使用的组件页面布局… Vue2项目练手——通用后台管理项目 首页组件布局面包屑tag面包屑使用组件使用vuex存储面包屑数据src/store/tab.jssrc/components/CommonAside.vuesrc/components/CommonHeader.vue tag使用组件文件目录CommonTag.vueMain.vuetabs.js 用户管理页新增功能使用的组件页面布局与校验Users.vue 首页组件布局
面包屑tag
面包屑
使用组件 使用vuex存储面包屑数据
src/store/tab.js
export default {state:{isCollapse:false, //控制菜单的展开还是收起tabsList:[{path:/,name:home,label:首页,icon:s-home,url:Home/Home},] //面包屑数据},mutations:{// 修改菜单展开收起的方法collapseMenu(state){state.isCollapse!state.isCollapse},//更新面包屑selectMenu(state,val){//判断添加的数据是否为首页if(val.name!home){const indexstate.tabsList.findIndex(itemitem.nameval.name)//如果不存在if(index-1){state.tabsList.push(val)}}state.tabsList.findIndex(val)}}
}
src/components/CommonAside.vue
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapse background-color#545c64 text-color#fffactive-text-color#ffd04bh3{{isCollapse?后台:通用后台管理系统}}/h3el-menu-item clickclickMenu(item) v-foritem in noChildren :keyitem.name :indexitem.namei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/el-menu-itemel-submenu :indexitem.label v-foritem in hasChildren :keyitem.labeltemplate slottitlei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/templateel-menu-item-groupel-menu-item clickclickMenu(subItem) :indexsubItem.path :keysubItem.path v-forsubItem in item.children{{subItem.label}}/el-menu-item/el-menu-item-group/el-submenu/el-menu/templatestyle langless scoped
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
.el-menu{height: 100vh; //占据页面高度100%h3{color: #fff;text-align: center;line-height: 48px;font-size: 16px;font-weight: 400;}
}
/stylescript
export default {data() {return {menuData:[{path:/,name:home,label:首页,icon:s-home,url:Home/Home},{path:/mall,name:mall,label:商品管理,icon:video-play,url:MallManage/MallManage},{path:/user,name:user,label:用户管理,icon:user,url:userManage/userManage},{label:其他,icon:location,children:[{path:/page1,name:page1,label:页面1,icon:setting,url:Other/PageOne},{path:/page2,name:page2,label:页面2,icon:setting,url:Other/PageTwo},]},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},clickMenu(item){// console.log(item)// console.log(this.$route.path)// 当页面的路由与跳转的路由不一致才允许跳转if(this.$route.path!item.path !(this.$route.path/home(item.path/))){this.$router.push(item.path)}this.$store.commit(selectMenu,item)}},mounted() {console.log(this.$route.path)},computed:{//没有子菜单的数据noChildren(){return this.menuData.filter(item!item.children)},//有子菜单数组hasChildren(){return this.menuData.filter(itemitem.children)},isCollapse(){return this.$store.state.tab.isCollapse}}
}
/script
src/components/CommonHeader.vue
templatediv classheader-containerdiv classl-contentel-button stylemargin-right: 20px iconel-icon-menu sizemini clickhandleMenu/el-button!-- 面包屑--
!-- span classtext首页/span--el-breadcrumb separator/el-breadcrumb-item v-foritem in tags :keyitem.path :to{ path: item.path }{{ item.label }}/el-breadcrumb-item/el-breadcrumb/divdiv classr-contentel-dropdownspan classel-dropdown-linkimg src/assets/user.webp alt/spanel-dropdown-menu slotdropdownel-dropdown-item个人中心/el-dropdown-itemel-dropdown-item退出/el-dropdown-item/el-dropdown-menu/el-dropdown/div/div/templatescript
import {mapState} from vuex
export default {name: CommonHeader,methods:{handleMenu(){this.$store.commit(collapseMenu)}},computed:{...mapState({tags: statestate.tab.tabsList})}
}
/scriptstyle scoped langless
.header-container {height: 60px;background-color: #333;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;.text {color: #fff;font-size: 14px;margin-left: 10px;}.r-content{img{width: 40px;height: 40px;border-radius: 50%;}}.l-content{display: flex;align-items: center;/deep/.el-breadcrumb__item{ /*元素没有绑定data-v-5a90ec03这样的编号时候样式不起作用使用deep进行穿刺可解决问题*/.el-breadcrumb__inner{font-weight: normal;.is-link{color: #666;}}:last-child{.el-breadcrumb__inner {color: #fff;}}}}
}
/style tag
使用组件 文件目录 CommonTag.vue
templatediv classtabsel-tagv-for(item,index) in tags:keyitem.path:closableitem.name!home:effect$route.nameitem.name?dark:plainclickchangeMenu(item)closehandleClose(item,index)sizesmall{{ item.label }}/el-tag/div
/templatescript
import {mapState,mapMutations} from vuexexport default {name: CommonTag,data(){return{}},computed:{...mapState({tags: statestate.tab.tabsList})},methods:{...mapMutations([closeTag]),// 点击tag跳转的功能changeMenu(item){if(this.$route.path!item.path !(this.$route.path/home(item.path/))){this.$router.push({name:item.name})}},//点击tag删除的功能handleClose(item,index){//调用store中的mutationthis.closeTag(item)const length this.tags.length;//跳转之后的逻辑if(item.name!this.$route.name){return}//表示删除的是最后一项if(indexlength){this.$router.push({name:this.tags[index-1].name})}else{this.$router.push({name:this.tags[index].name})}}}}
/scriptstyle scoped langless
.tabs{padding: 20px;.el-tag{margin-right: 15px;cursor: pointer;}
}
/style
computed:{...mapState({tags: statestate.tab.tabsList})}Main.vue
common-tag/common-tag全部代码
templatedivel-containerel-aside widthautoCommonAside/CommonAside/el-asideel-containerel-headerCommonHeader/CommonHeader/el-headercommon-tag/common-tagel-main
!-- 路由出口路由匹配到的组件将渲染在这里 --router-view/router-view/el-main/el-container/el-container/div/templatescript
import CommonAside from /components/CommonAside.vue;
import CommonHeader from /components/CommonHeader.vue;
import CommonTag from /components/CommonTag;
export default {name: Main,components:{CommonAside,CommonHeader,CommonTag}
}
/scriptstyle scoped
.el-header{padding: 0;margin: 0;
}
.el-menu{border-right: none;
}
/style
tabs.js
//删除指定的tagcloseTag(state,item){const indexstate.tabsList.findIndex(valval.nameitem.name)state.tabsList.splice(index,1) //splice(删除的位置删除的个数}全部代码
export default {state:{isCollapse:false, //控制菜单的展开还是收起tabsList:[{path:/,name:home,label:首页,icon:s-home,url:Home/Home},] //面包屑数据},mutations:{// 修改菜单展开收起的方法collapseMenu(state){state.isCollapse!state.isCollapse},//更新面包屑selectMenu(state,val){//判断添加的数据是否为首页if(val.name!home){// console.log(state,state)const indexstate.tabsList.findIndex(itemitem.nameval.name)//如果不存在if(index-1){state.tabsList.push(val)}}},//删除指定的tagcloseTag(state,item){const indexstate.tabsList.findIndex(valval.nameitem.name)state.tabsList.splice(index,1) //splice(删除的位置删除的个数}}
} 用户管理页
新增功能
使用的组件
对话框 表单
页面布局与校验
Users.vue
templatediv classmanageel-dialogtitle提示:visible.syncdialogVisiblewidth40%:before-closehandleClose
!-- 用户的表单信息--el-form refform :inlinetrue :rulesrules :modelform label-width80pxel-form-item label姓名 propnameel-input v-modelform.name placeholder请输入姓名/el-input/el-form-itemel-form-item label年龄 propageel-input v-modelform.age placeholder请输入年龄/el-input/el-form-itemel-form-item label性别 propsexel-select v-modelform.sex placeholder请选择el-option label男 value1/el-optionel-option label女 value0/el-option/el-select/el-form-itemel-form-item label出生日期 propbirthel-date-pickertypedateplaceholder选择日期v-modelform.birth stylewidth: 100%;/el-date-picker/el-form-itemel-form-item label地址 propaddrel-input v-modelform.addr placeholder请输入地址/el-input/el-form-item/el-formspan slotfooter classdialog-footerel-button clickcancel取 消/el-buttonel-button typeprimary clicksubmit确 定/el-button/span/el-dialogdiv classmanage-headerel-button typeprimary clickdialogVisibletrue新增/el-button/div/div/templatescript
export default {name: Users,data(){return {dialogVisible:false,form: {name: ,age: ,sex: ,birth: ,addr: ,},rules: {name: [{required: true, message: 请输入姓名}],age: [{required: true, message: 请输入年龄}],sex: [{required: true, message: 请选择性别}],birth: [{required: true, message: 请选择出生日期}],addr: [{required: true, message: 请输入地址}],}}},methods:{//提交用户表单submit(){this.$refs.form.validate((valid){if(valid){// 后续对表单数据的处理console.log(this.form)//清空表单数据this.$refs.form.resetFields()//关闭弹窗this.dialogVisiblefalse}})},//弹窗关闭的时候handleClose(){//清空表单this.$refs.form.resetFields()this.dialogVisiblefalse},cancel(){this.handleClose()}}
}
/scriptstyle scoped/style
