fix: 移动端logo和name从config获取
This commit is contained in:
parent
a24eece353
commit
7591e3c34c
|
|
@ -1,136 +1,186 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="" class="mobile-nav-button" @click="showMobileNav($event)" v-drag draggable="false"><el-icon><el-icon-menu /></el-icon></div>
|
<div ref="" class="mobile-nav-button" @click="showMobileNav($event)" v-drag draggable="false">
|
||||||
|
<el-icon><el-icon-menu /></el-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="nav" direction="ltr" :with-header="false" destroy-on-close>
|
<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="nav" direction="ltr" :with-header="false"
|
||||||
|
destroy-on-close>
|
||||||
<el-container class="mobile-nav">
|
<el-container class="mobile-nav">
|
||||||
<el-header>
|
<el-header>
|
||||||
<div class="logo-bar"><img class="logo" src="img/logo.png"><span>{{ $CONFIG.APP_NAME }}</span></div>
|
<div class="logo-bar"><img class="logo" :src="baseLogo"><span>{{ baseName }}</span>></div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-menu :default-active="$route.meta.active || $route.fullPath" @select="select" router background-color="#212d3d" text-color="#fff" active-text-color="#409EFF">
|
<el-menu :default-active="$route.meta.active || $route.fullPath" @select="select" router
|
||||||
|
background-color="#212d3d" text-color="#fff" active-text-color="#409EFF">
|
||||||
<NavMenu :navMenus="menu"></NavMenu>
|
<NavMenu :navMenus="menu"></NavMenu>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import NavMenu from './NavMenu.vue';
|
import NavMenu from './NavMenu.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
NavMenu
|
NavMenu
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nav: false,
|
||||||
|
menu: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
baseLogo() {
|
||||||
|
let baseLogo = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_logo : 'img/logo.png';
|
||||||
|
return baseLogo
|
||||||
},
|
},
|
||||||
data() {
|
baseName() {
|
||||||
return {
|
let baseName = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_name : '智慧管理平台';
|
||||||
nav: false,
|
return baseName;
|
||||||
menu: []
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
var menu = this.$router.sc_getMenu()
|
||||||
|
this.menu = this.filterUrl(menu)
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showMobileNav(e) {
|
||||||
|
var isdrag = e.currentTarget.getAttribute('drag-flag')
|
||||||
|
if (isdrag == 'true') {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
this.nav = true;
|
||||||
}
|
}
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
|
|
||||||
},
|
},
|
||||||
created() {
|
select() {
|
||||||
var menu = this.$router.sc_getMenu()
|
this.$refs.mobileNavBox.handleClose()
|
||||||
this.menu = this.filterUrl(menu)
|
|
||||||
},
|
},
|
||||||
|
//转换外部链接的路由
|
||||||
watch: {
|
filterUrl(map) {
|
||||||
|
var newMap = []
|
||||||
},
|
map && map.forEach(item => {
|
||||||
methods: {
|
item.meta = item.meta ? item.meta : {};
|
||||||
showMobileNav(e){
|
//处理隐藏
|
||||||
var isdrag = e.currentTarget.getAttribute('drag-flag')
|
if (item.meta.hidden || item.meta.type == "button") {
|
||||||
if (isdrag == 'true') {
|
return false
|
||||||
return false;
|
|
||||||
}else{
|
|
||||||
this.nav = true;
|
|
||||||
}
|
}
|
||||||
|
//处理http
|
||||||
|
if (item.meta.type == 'iframe') {
|
||||||
|
item.path = `/i/${item.name}`;
|
||||||
|
}
|
||||||
|
//递归循环
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
item.children = this.filterUrl(item.children);
|
||||||
|
}
|
||||||
|
newMap.push(item)
|
||||||
|
})
|
||||||
|
return newMap;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
|
||||||
},
|
//移动当前元素
|
||||||
select(){
|
|
||||||
this.$refs.mobileNavBox.handleClose()
|
if (t > 0 && t < document.body.clientHeight - 50) {
|
||||||
},
|
oDiv.style.top = t + "px";
|
||||||
//转换外部链接的路由
|
|
||||||
filterUrl(map){
|
|
||||||
var newMap = []
|
|
||||||
map && map.forEach(item => {
|
|
||||||
item.meta = item.meta?item.meta:{};
|
|
||||||
//处理隐藏
|
|
||||||
if(item.meta.hidden || item.meta.type=="button"){
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
//处理http
|
if (l > 0 && l < document.body.clientWidth - 50) {
|
||||||
if(item.meta.type=='iframe'){
|
oDiv.style.left = l + "px";
|
||||||
item.path = `/i/${item.name}`;
|
|
||||||
}
|
}
|
||||||
//递归循环
|
|
||||||
if(item.children&&item.children.length > 0){
|
|
||||||
item.children = this.filterUrl(item.children);
|
}
|
||||||
|
document.onmouseup = function () {
|
||||||
|
lastTime = new Date().getTime();
|
||||||
|
if ((lastTime - firstTime) > 200) {
|
||||||
|
oDiv.setAttribute('drag-flag', false);
|
||||||
}
|
}
|
||||||
newMap.push(item)
|
document.onmousemove = null;
|
||||||
})
|
document.onmouseup = null;
|
||||||
return newMap;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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;
|
|
||||||
};
|
};
|
||||||
}
|
//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
|
||||||
|
return false;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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 {
|
||||||
.mobile-nav-button i {color: #fff;font-size: 20px;}
|
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 {background: #212d3d;}
|
.mobile-nav-button i {
|
||||||
.mobile-nav .el-header {background: transparent;border: 0;}
|
color: #fff;
|
||||||
.mobile-nav .el-main {padding:0;}
|
font-size: 20px;
|
||||||
.mobile-nav .logo-bar {display: flex;align-items: center;font-weight: bold;font-size: 20px;color: #fff;}
|
}
|
||||||
.mobile-nav .logo-bar img {width: 30px;margin-right: 10px;}
|
|
||||||
.mobile-nav .el-submenu__title:hover {background: #fff!important;}
|
.mobile-nav {
|
||||||
|
background: #212d3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav .el-header {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav .el-main {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav .logo-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav .logo-bar img {
|
||||||
|
width: 30px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav .el-submenu__title:hover {
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue