更新移动端菜单和部分样式
This commit is contained in:
sakuya
parent
b67a8f8de5
commit
bda7dcae45
|
|
@ -1,10 +1,7 @@
|
|||
<template>
|
||||
<div class="adminui-header">
|
||||
<div class="left-panel">
|
||||
<div v-if="ismobile" class="mobile-nav-icon panel-item" @click="mobileNav">
|
||||
<i class="el-icon-menu"></i>
|
||||
</div>
|
||||
<el-breadcrumb v-if="!ismobile" separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right" class="hidden-sm-and-down">
|
||||
<template v-for="(item) in breadList" v-bind:key="item" >
|
||||
<el-breadcrumb-item v-if="item.path !='/'"><i v-if="item.meta&&item.meta.icon" :class="item.meta.icon || 'el-icon-menu'"></i>{{item.meta.title}}</el-breadcrumb-item>
|
||||
</template>
|
||||
|
|
@ -14,10 +11,10 @@
|
|||
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="screen panel-item" @click="screen">
|
||||
<div class="screen panel-item hidden-sm-and-down" @click="screen">
|
||||
<i class="el-icon-full-screen"></i>
|
||||
</div>
|
||||
<div class="setting panel-item">
|
||||
<div class="setting panel-item hidden-sm-and-down">
|
||||
<i class="el-icon-setting"></i>
|
||||
</div>
|
||||
<el-popover placement="bottom" :width="360" trigger="click">
|
||||
|
|
@ -95,11 +92,6 @@
|
|||
this.userNameF = this.userName.substring(0,1);
|
||||
this.getBreadcrumb();
|
||||
},
|
||||
computed:{
|
||||
ismobile(){
|
||||
return this.$store.state.global.ismobile
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb();
|
||||
|
|
@ -130,10 +122,6 @@
|
|||
//标记已读
|
||||
markRead(){
|
||||
this.msgList = []
|
||||
},
|
||||
//移动端打开菜单，暴露父组件事件
|
||||
mobileNav(){
|
||||
this.$emit('mobile-nav')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<el-menu :default-active="$route.fullPath" @select="select" router>
|
||||
<NavMenu :navMenus="menu"></NavMenu>
|
||||
</el-menu>
|
||||
<div ref="" class="mobile-nav-button" @click="showMobileNav($event)" v-drag draggable="false"><i class="el-icon-menu"></i></div>
|
||||
|
||||
<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="nav" direction="ltr" :with-header="false" destroy-on-close>
|
||||
<el-menu :default-active="$route.fullPath" @select="select" router>
|
||||
<NavMenu :navMenus="menu"></NavMenu>
|
||||
</el-menu>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -13,24 +17,35 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
menu: [],
|
||||
nav: false,
|
||||
menu: []
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
computed:{
|
||||
|
||||
},
|
||||
created() {
|
||||
var menu = this.$TOOL.data.get("user").menuList;
|
||||
var home = this.$router.options.routes[0].children[0];
|
||||
menu.unshift(home);
|
||||
this.menu = this.filterUrl(menu)
|
||||
},
|
||||
setup() {
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
showMobileNav(e){
|
||||
var isdrag = e.currentTarget.getAttribute('drag-flag')
|
||||
if (isdrag == 'true') {
|
||||
return false;
|
||||
}else{
|
||||
this.nav = true;
|
||||
}
|
||||
|
||||
},
|
||||
select(){
|
||||
this.$parent.$el.click()
|
||||
this.$refs.mobileNavBox.handleClose()
|
||||
},
|
||||
//转换外部链接的路由
|
||||
filterUrl(map){
|
||||
|
|
@ -50,9 +65,56 @@
|
|||
}
|
||||
|
||||
})
|
||||
|
||||
return map;
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
drag(el){
|
||||
let oDiv = el; //当前元素
|
||||
let firstTime='',lastTime='';
|
||||
//禁止选择网页上的文字
|
||||
// document.onselectstart = function() {
|
||||
// return false;
|
||||
// };
|
||||
oDiv.onmousedown = function(e){
|
||||
//鼠标按下，计算当前元素距离可视区的距离
|
||||
let disX = e.clientX - oDiv.offsetLeft;
|
||||
let disY = e.clientY - oDiv.offsetTop;
|
||||
document.onmousemove = function(e){
|
||||
oDiv.setAttribute('drag-flag', true);
|
||||
firstTime = new Date().getTime();
|
||||
//通过事件委托，计算移动的距离
|
||||
let l = e.clientX - disX;
|
||||
let t = e.clientY - disY;
|
||||
|
||||
//移动当前元素
|
||||
|
||||
if(t > 0 && t < document.body.clientHeight - 50){
|
||||
oDiv.style.top = t + "px";
|
||||
}
|
||||
if(l > 0 && l < document.body.clientWidth - 50){
|
||||
oDiv.style.left = l + "px";
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
document.onmouseup = function(){
|
||||
lastTime = new Date().getTime();
|
||||
if( (lastTime - firstTime)>200 ){
|
||||
oDiv.setAttribute('drag-flag', false);
|
||||
}
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
|
||||
return false;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mobile-nav-button {position: fixed;bottom:10px;left:10px;z-index: 10;width: 50px;height: 50px;background: #409EFF;box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 1);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
|
||||
.mobile-nav-button i {color: #fff;font-size: 20px;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,13 @@
|
|||
<template>
|
||||
<Side v-if="!ismobile"></Side>
|
||||
|
||||
<Side-m v-if="ismobile"></Side-m>
|
||||
<div class="aminui-body el-container">
|
||||
<Head @mobile-nav="mobileNav"></Head>
|
||||
<Head></Head>
|
||||
<Tags v-if="!ismobile"></Tags>
|
||||
<div class="adminui-main" id="adminui-main">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="mobileNavBox" direction="ltr" :with-header="false" append-to-body destroy-on-close>
|
||||
<SideM></SideM>
|
||||
</el-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -31,7 +26,7 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
mobileNavBox: false
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
|
|
@ -39,7 +34,7 @@
|
|||
return this.$store.state.global.ismobile
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
created() {
|
||||
this.onLayoutResize();
|
||||
window.addEventListener('resize', this.onLayoutResize);
|
||||
},
|
||||
|
|
@ -51,9 +46,6 @@
|
|||
}else{
|
||||
this.$store.commit("SET_ismobile", false)
|
||||
}
|
||||
},
|
||||
mobileNav(){
|
||||
this.mobileNavBox = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
state: {
|
||||
ismobile: false,
|
||||
ismobile: false
|
||||
},
|
||||
mutations: {
|
||||
SET_ismobile(state, key){
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<h2>嗨~ admin，忙碌了一上午，记得吃午饭哦。</h2>
|
||||
<p>最近更新：动态面包屑，外部链接，Iframe链接等</p>
|
||||
</div>
|
||||
<div class="icons hidden-xs-only">
|
||||
<div class="icons hidden-sm-and-down">
|
||||
<div class="avatar-list">
|
||||
<el-tooltip content="Sakuya" placement="top">
|
||||
<el-avatar class="avatar" :size="30" src="images/avatar.jpg"></el-avatar>
|
||||
|
|
|
|||
Loading…
Reference in New Issue