1.1.0 • Published 4 years ago
ha-main-page v1.1.0
导航
演示案例:
1.创建一个vue.js项目并启动。
npm install -g @vue/cli @vue/cli-service-global'
npm run dev
2.在入口文件 main.js中引入组件库。
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import MpsUI from 'csdc-main-page'
Vue.use(ElementUI);
Vue.use(MpsUI)
3.在template中添加DOM结构。
<cs-mpsheader
:secondTitle = "secondTitle"
:sidebarStatue="sidebarStatue"
:userInfo="userInfo"
:statue="statue"
:list="list"
:collapsedSecondFlag = "collapsedSecondFlag"
:secondmenuTitle = "secondmenuTitle"
:http_error_statues="http_error_statues"
>
</cs-mpsheader >
<cs-mpsfirstmenu
:flag="flag"
:menuList = "menuList"
:sidebarStatue="sidebarStatue"
:collapsedSecondFlag = "collapsedSecondFlag"
@changeSidebarStatue = "changeSidebarStatue"
@secondIdMenuIsShow = "secondIdMenuIsShow"
@getsecondTitle = "getsecondTitle"
></cs-mpsfirstmenu>
<cs-mpssecondmenu
:defaultHrefData = defaultHrefData
:sidebarStatue="sidebarStatue"
:menuListChild = "menuListChild"
:collapsedSecondFlag ="collapsedSecondFlag"
:secondMenuCodeId = "secondMenuCodeId"
:secondmenuTitle = "secondmenuTitle"
@secondIdMenuIsShow = "secondIdMenuIsShow"
@getsecondTitle = "getsecondTitle"
@setFlag = "setFlag"
></cs-mpssecondmenu>
4.在script中定义数据与编写逻辑。
import http_error_statues from '../common/httpPrompt';
import firstMenu1 from '../common/firstMenu1';
import firstMenu from '../common/firstMenu';
export default {
data () {
return {
sidebarStatue:{
collapsed: false, //侧边栏展示宽度问题,默认不折叠
show:false
},
secondTitle:"",
//向header传值
userInfo:{}, //用户信息
statue: {}, //登录状态
list:[], //消息列表
http_error_statues: {},
menuList:{}, //第一个侧边栏数据
menuListChild:{}, //第二个侧边栏数据
collapsedSecondFlag:false,//控制mpssecondmenu按钮显示
secondMenuCodeId:-1,//mpssecondmenu显示的对应一级id
secondmenuTitle:"",
flag:false,
defaultHrefData:{}
}
},
created() {
this.http_error_statues = http_error_statues;
this.menuList = firstMenu1.result;
this.menuListChild = firstMenu.result;
this.getStatue();
this.getUserInfo();
},
methods: {
//修改侧边栏展开装态
changeSidebarStatue(data){
this.sidebarStatue.collapsed = data;
},
//secondIdMenuIsShow二级菜单显示,控制按钮
secondIdMenuIsShow(data){
if(data instanceof Array){
this.secondMenuCodeId = data[0];
this.collapsedSecondFlag = data[1];
this.secondmenuTitle = data[2];
this.defaultHrefData = data[3]
}else{
this.collapsedSecondFlag = data;
}
},
getsecondTitle(data){
this.secondTitle = data;
},
setFlag(data){
this.flag = data;
},
getStatue() {
// this.$http.get('users/get/statue').then((response) => {
// this.statue = response.data.result;
this.statue = {"statue":"1","message":"登陆成功!"}
// });
},
getUserInfo(){
this.userInfo = {
"id": 4,
"account": "popadmin",
"name": "权限管理员",
"password": "abe143ed98b5d63bbb5fb24881f8a245",
"salt": "81,-34,-22,-90,-121,-114,-91,20,52,79,-123,-115",
"email": "popadmin@tydic.com",
"mobile": "17948652134",
"sex": "1",
"type": "2",
"status": "1",
"description": null,
"appsOrder": null,
"isAdmin": "1",
"isFirst": "0",
"remark": null,
"sys_id": 1,
"department_id": 26,
"createDate": 1532586282000,
"updateDate": 1565660212000,
"modifyTime": 1565625600000,
"creator": null,
"department_name": "北京"
}
}
},
}
5.在style中编写CSS。
.container {
width: 100%;
height: 100%;
}