xs-common-plugins 1.2.7 → 1.2.9

package/package.json

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

package/src/common/common.js

@@ -6,6 +6,8 @@ import {OrgEnum} from '@/utils/enum'
 import filterRules from '@/utils/filterRules'
 import request from "xs-request";
 import moduleCfg from '@/modules/module.config.js'
+
+
 const common = {}
 
 /**
@@ -317,7 +319,7 @@ common.popup = (options) => {
 		},
 		template: `
 			<div>
-			<el-dialog :title="title" :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

@@ -0,0 +1,157 @@
+export default {
+	bind(el, binding, vnode, oldVnode) {
+		let resizeEvent = new CustomEvent('drag-resize', { detail: '尺寸变化', bubbles: false });
+		//初始化不最大化
+		el.fullscreen = false;
+		//弹框可拉伸最小宽高
+		let minWidth = 400;
+		let minHeight = 300;
+		//当前宽高
+		let nowWidth = minWidth;
+		let nowHight = minHeight;
+		//当前顶部高度
+		let nowMarginTop = 0;
+		//获取弹框头部（这部分可双击全屏）
+		const dialogHeaderEl = el.querySelector('.el-dialog__header');
+		let hasSetBodyHight = false;
+		//弹窗
+		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");
+		maxMin.className += ' el-dialog__headerbtn el-dialog__minmax';
+		maxMin.style.right = '40px';
+		maxMin.style.color = '#909399';
+		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() {
+			// debugger
+			if (el.fullscreen) {
+				let i = maxMin.querySelector('.el-icon-crop');
+				i.classList.remove('el-icon-crop');
+				i.classList.add('el-icon-full-screen');
+				maxMin.innerHTML = '<i class="el-icon-full-screen"></i>';
+				maxMin.title = '最大化';
+				dragDom.style.height = "auto";
+				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 {
+				let i = maxMin.querySelector('.el-icon-full-screen');
+				i.classList.remove('el-icon-full-screen');
+				i.classList.add('el-icon-crop');
+				maxMin.title = '还原';
+				bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px';
+				nowHight = dragDom.clientHeight;
+				nowWidth = dragDom.clientWidth;
+				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)';
+					hasSetBodyHight = true;
+				}
+			}
+			el.dispatchEvent(resizeEvent);
+		}
+
+		// 点击放大缩小效果
+		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);
+			};
+		}
+	}
+}

package/src/plugins/index.js

@@ -4,9 +4,14 @@ import utils from 'xs-component/lib/utils'
 import base from 'xs-component/lib/base'
 import api from '@/automatically/api'
 import Vue from 'vue'
+import FullScreenDirective from "../common/fullScreenDirective";
 import store from '../store/index'
 import {request, requestApi} from 'xs-request'
 import ossService from '@/utils/ossService'
+
+Vue.directive('el-drag-dialog',FullScreenDirective)
+
+
 //  以上部分为 xs-component 引入
 base.install(api ? api : {}) // 请求及api映射