zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 移动端logo和name从config获取

This commit is contained in:
caoqianming 2023-12-24 18:35:27 +08:00
parent a24eece353
commit 7591e3c34c
1 changed files with 151 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/layout/components/sideM.vue
View File

@ -1,27 +1,30 @@
<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-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-main>
<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>
</el-menu>
</el-scrollbar>
</el-main>
</el-container>
</el-drawer>
</template>
<script>
import NavMenu from './NavMenu.vue';
import NavMenu from './NavMenu.vue';
export default {
export default {
components: {
NavMenu
},
@ -31,8 +34,15 @@
menu: []
}
},
computed:{
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
},
baseName() {
let baseName = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_name : '智慧管理平台';
return baseName;
},
},
created() {
var menu = this.$router.sc_getMenu()
@ -43,33 +53,33 @@
},
methods: {
showMobileNav(e){
showMobileNav(e) {
var isdrag = e.currentTarget.getAttribute('drag-flag')
if (isdrag == 'true') {
return false;
}else{
} else {
this.nav = true;
}
},
select(){
select() {
this.$refs.mobileNavBox.handleClose()
},
//转换外部链接的路由
filterUrl(map){
filterUrl(map) {
var newMap = []
map && map.forEach(item => {
item.meta = item.meta?item.meta:{};
item.meta = item.meta ? item.meta : {};
//处理隐藏
if(item.meta.hidden || item.meta.type=="button"){
if (item.meta.hidden || item.meta.type == "button") {
return false
}
//处理http
if(item.meta.type=='iframe'){
if (item.meta.type == 'iframe') {
item.path = `/i/${item.name}`;
}
//递归循环
if(item.children&&item.children.length > 0){
if (item.children && item.children.length > 0) {
item.children = this.filterUrl(item.children);
}
newMap.push(item)
@ -78,18 +88,18 @@
}
},
directives: {
drag(el){
drag(el) {
let oDiv = el; //当前元素
let firstTime='',lastTime='';
let firstTime = '', lastTime = '';
//禁止选择网页上的文字
// document.onselectstart = function() {
// return false;
// };
oDiv.onmousedown = function(e){
oDiv.onmousedown = function (e) {
//鼠标按下，计算当前元素距离可视区的距离
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e){
document.onmousemove = function (e) {
oDiv.setAttribute('drag-flag', true);
firstTime = new Date().getTime();
//通过事件委托，计算移动的距离
@ -98,18 +108,18 @@
//移动当前元素
if(t > 0 && t < document.body.clientHeight - 50){
if (t > 0 && t < document.body.clientHeight - 50) {
oDiv.style.top = t + "px";
}
if(l > 0 && l < document.body.clientWidth - 50){
if (l > 0 && l < document.body.clientWidth - 50) {
oDiv.style.left = l + "px";
}
}
document.onmouseup = function(){
document.onmouseup = function () {
lastTime = new Date().getTime();
if( (lastTime - firstTime)>200 ){
if ((lastTime - firstTime) > 200) {
oDiv.setAttribute('drag-flag', false);
}
document.onmousemove = null;
@ -120,17 +130,57 @@
};
}
}
}
}
</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;}
.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 {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;}
.mobile-nav-button i {
color: #fff;
font-size: 20px;
}
.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>