From bda7dcae45c7b1404af5733d0858659c1072b868 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Tue, 11 May 2021 22:42:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=92=8C=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/head.vue  | 18 ++------
 src/layout/components/sideM.vue | 80 +++++++++++++++++++++++++++++----
 src/layout/index.vue            | 16 ++-----
 src/store/modules/global.js     |  2 +-
 src/views/home/index.vue        |  2 +-
 5 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/src/layout/components/head.vue b/src/layout/components/head.vue
index 0020b4f9..f043bcd1 100644
--- a/src/layout/components/head.vue
+++ b/src/layout/components/head.vue
@@ -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')
 			}
 		}
 	}
diff --git a/src/layout/components/sideM.vue b/src/layout/components/sideM.vue
index 5da30dd3..0aa2bc41 100644
--- a/src/layout/components/sideM.vue
+++ b/src/layout/components/sideM.vue
@@ -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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6828dddf..8c0ace37 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -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
 			}
 		}
 	}
diff --git a/src/store/modules/global.js b/src/store/modules/global.js
index 479d9012..f0087030 100644
--- a/src/store/modules/global.js
+++ b/src/store/modules/global.js
@@ -1,6 +1,6 @@
 export default {
 	state: {
-		ismobile: false,
+		ismobile: false
 	},
 	mutations: {
 		SET_ismobile(state, key){
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a44e9275..2910ce81 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -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>