xs-common-plugins 1.2.8 → 1.3.0

package/README.md

@@ -313,3 +313,7 @@
    1.优化common.popup弹窗方法。
    2.优化common.clone方法
 ```
+```
+   1.3.0
+   1.调整fullScreenDirective.js
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xs-common-plugins",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "private": false,
   "description": "向上公共代码部分",
   "author": "祝玲云 <1902733517@qq.com>",

package/src/common/common.js

@@ -319,7 +319,7 @@ common.popup = (options) => {
 		},
 		template: `
 			<div>
-			<el-dialog :title="title" el-drag-dialog :visible.sync="visible" :width="width" :before-close="beforeClose" v-bind="dialogCfg" append-to-body>
+			<el-dialog :title="title" v-el-drag-dialog :visible.sync="visible" :width="width" :before-close="beforeClose" v-bind="dialogCfg" append-to-body>
 				<child ref="child" :srcData="srcData" v-bind="props" @close="close" @cancel="cancel"/>
 				<div v-if="showButton" style="text-align: right;">
 					<el-button size="medium" type="primary" @click="confirm">确认</el-button>

package/src/common/fullScreenDirective.js

@@ -17,13 +17,6 @@ export default {
 		//弹窗
 		const dragDom = el.querySelector('.el-dialog');
 		dragDom.className += ' el-drag-dialog';
-		//清除选择头部文字效果
-		dialogHeaderEl.onselectstart = new Function("return false");
-		//头部加上可拖动cursor
-		dialogHeaderEl.style.cursor = 'move';
-
-		// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
-		const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
 
 		//头部插入最大化最小化元素
 		let maxMin = document.createElement("button");
@@ -33,42 +26,7 @@ export default {
 		maxMin.title = el.fullscreen ? '还原' : '最大化';
 		maxMin.innerHTML = '<i class=' + (el.fullscreen ? '"el-icon-crop"' : '"el-icon-full-screen"') + ' onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="this.style.color=\'inherit\'"></i>';
 		dialogHeaderEl.insertBefore(maxMin, dialogHeaderEl.childNodes[1]);
-		let moveDown = (e) => {
-			// 鼠标按下，计算当前元素距离可视区的距离
-			const disX = e.clientX - dialogHeaderEl.offsetLeft;
-			const disY = e.clientY - dialogHeaderEl.offsetTop;
-
-			// 获取到的值带px 正则匹配替换
-			let styL, styT;
-
-			// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-			if (sty.left.includes('%')) {
-				styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
-				styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
-			} else {
-				styL = +sty.left.replace(/\px/g, '');
-				styT = +sty.top.replace(/\px/g, '');
-			}
 
-			document.onmousemove = function (e) {
-				// 通过事件委托，计算移动的距离
-				const l = e.clientX - disX;
-				const t = e.clientY - disY;
-
-				// 移动当前元素
-				dragDom.style.left = `${l + styL}px`;
-				dragDom.style.top = `${t + styT}px`;
-
-				//将此时的位置传出去
-				//binding.value({x:e.pageX,y:e.pageY})
-			};
-
-			document.onmouseup = function (e) {
-				document.onmousemove = null;
-				document.onmouseup = null;
-			};
-		}
-		dialogHeaderEl.onmousedown = moveDown;
 		let bodyHeight = 'auto';
 
 		function setMaxMin() {
@@ -83,8 +41,6 @@ export default {
 				dragDom.style.width = nowWidth + 'px';
 				dragDom.style.marginTop = nowMarginTop;
 				el.fullscreen = false;
-				dialogHeaderEl.style.cursor = 'move';
-				dialogHeaderEl.onmousedown = moveDown;
 				dragDom.querySelector('.el-dialog__body').style.height = bodyHeight;
 				hasSetBodyHight = false;
 			} else {
@@ -98,8 +54,6 @@ export default {
 				nowMarginTop = dragDom.style.marginTop;
 				dragDom.style = 'width:100vw;height:100vh !important;'
 				el.fullscreen = true;
-				dialogHeaderEl.style.cursor = 'initial';
-				dialogHeaderEl.onmousedown = null;
 				if (!hasSetBodyHight) {
 					let footerHeight = dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight;
 					dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)';
@@ -111,47 +65,5 @@ export default {
 
 		// 点击放大缩小效果
 		maxMin.onclick = setMaxMin;
-
-		//双击头部效果
-		// dialogHeaderEl.ondblclick = setMaxMin;
-
-		//拉伸
-		let resizeEl = document.createElement("div");
-		dragDom.appendChild(resizeEl);
-		//在弹窗右下角加上一个10-10px的控制块
-		resizeEl.style.cursor = 'se-resize';
-		resizeEl.style.position = 'absolute';
-		resizeEl.style.height = '10px';
-		resizeEl.style.width = '10px';
-		resizeEl.style.right = '0px';
-		resizeEl.style.bottom = '0px';
-		//鼠标拉伸弹窗
-		resizeEl.onmousedown = (e) => {
-			// 记录初始x位置
-			const clientX = e.clientX;
-			// 鼠标按下，计算当前元素距离可视区的距离
-			const disX = e.clientX - resizeEl.offsetLeft;
-			const disY = e.clientY - resizeEl.offsetTop;
-			document.onmousemove = function (e) {
-				e.preventDefault(); // 移动时禁用默认事件
-				// 通过事件委托，计算移动的距离
-				const x = e.clientX - disX + (e.clientX - clientX);//这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
-				const y = e.clientY - disY;
-				//比较是否小于最小宽高
-				dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
-				dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
-				if (!hasSetBodyHight) {
-					let footerHeight = dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight;
-					dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)';
-					hasSetBodyHight = true;
-				}
-			};
-			//拉伸结束
-			document.onmouseup = function (e) {
-				document.onmousemove = null;
-				document.onmouseup = null;
-				el.dispatchEvent(resizeEvent);
-			};
-		}
 	}
 }