rt-sim-training-client/src/directives.js

/* eslint-disable no-useless-escape */
import Vue from 'vue';
import store from '@/store';

/**
 *元素获取焦点：v-dialogDrag
 * @param {*} el
 * @param {*} binding
 */
Vue.directive('focus', {
	// 当被绑定的元素插入到 DOM 中时
	inserted: function (el, obj) {
		// 这是需要页面刚加载就能进行聚焦操作使用的钩子函数,可以省略的，视具体需求而定
		// 对值进行判断
		if (obj.value) {
			// 聚焦元素
			el.focus();
		}
	},
	// 当指令所在组件的 VNode 及其子 VNode 全部更新后调用
	// 这是每当绑定的值发生改变时触发的钩子函数
	componentUpdated: function (el, obj) {
		if (obj.value) {
			el.focus();
		}
	}
});

/**
 *弹窗拖拽：v-dialogDrag
 * @param {*} el
 * @param {*} binding
 * @param {*} vnode
 * @param {*} oldvNode
 */
Vue.directive('dialogDrag', {
	bind(el) {
		const dialogHeaderEl = el.querySelector('.el-dialog__header');
		const dragDom = el.querySelector('.el-dialog');
		dialogHeaderEl.style.cursor = 'move';

		/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
		const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

		dialogHeaderEl.onmousedown = (e) => {
			/**  鼠标按下，计算当前元素距离可视区的距离*/
			const disX = e.clientX - dialogHeaderEl.offsetLeft;
			const disY = e.clientY - dialogHeaderEl.offsetTop;

			/**  获取到的值带px 正则匹配替换*/
			let styL, styT;

			/**  注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
			if (sty.left.includes('%')) {
				// eslint-disable-next-line no-useless-escape
				styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
				styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
			} else {
				// eslint-disable-next-line no-useless-escape
				styL = +sty.left.replace(/\px/g, '');
				// eslint-disable-next-line no-useless-escape
				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`;

				/** 刷新提示标签位置*/
				store.dispatch('training/emitTipFresh');

				/** 将此时的位置传出去*/
				// binding.value({ x: e.pageX, y: e.pageY });
			};

			document.onmouseup = function () {
				document.onmousemove = null;
				document.onmouseup = null;
			};
		};
	}
});

/**
 *弹窗宽度拖大,拖小：dialogDragWidth
 * @param {*} el
 * @param {*} binding
 * @param {*} vnode
 * @param {*} oldvNode
 */
Vue.directive('dialogDragWidth', {
	bind(el, binding) {
		const dragDom = binding.value.$el.querySelector('.el-dialog');

		el.onmousedown = (e) => {

			/**  鼠标按下，计算当前元素距离可视区的距离*/
			const disX = e.clientX - el.offsetLeft;

			document.onmousemove = function (e) {
				/** 移动时禁用默认事件*/
				e.preventDefault();

				/** 通过事件委托，计算移动的距离*/
				const l = e.clientX - disX;
				dragDom.style.width = `${l}px`;
			};

			document.onmouseup = function () {
				document.onmousemove = null;
				document.onmouseup = null;
			};
		};
	}
});

/**
 * 弹窗拖拽：v-quickEntryDrag
 * @param {*} el
 * @param {*} binding
 * @param {*} vnode
 * @param {*} oldvNode
 */
Vue.directive('quickMenuDrag', {
	bind(el) {
		const dragDom = el;
		dragDom.style.cursor = 'move';

		/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
		const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

		dragDom.onmousedown = (e) => {
			/**  鼠标按下，计算当前元素距离可视区的距离*/
			const disX = e.clientX;
			const disY = e.clientY;

			/**  获取到的值带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 () {
				document.onmousemove = null;
				document.onmouseup = null;
			};
		};
	}
});

/**
 *vue-自定义指令-拖拽 v-drag
 */
Vue.directive('drag', {
	bind(el) {
		const dragDom = el.querySelector('.reminder-box');
		const dragRight = el.querySelector('.drag-right');
		const dragLeft = el.querySelector('.drag-left');
		const dragBottom = el.querySelector('.drag-bottom');
		const dragTop = el.querySelector('.drag-top');
		const dragBody = el.querySelector('.tip-body');
		const body = el.querySelector('.tip-body-box');

		dragRight.onmousedown = (e) => {
			document.onselectstart = function () {
				return false;
			};
			// 宽度拖拽
			var iEvent = e || event;
			var disX = iEvent.clientX;
			var disW = dragDom.offsetWidth;
			document.onmousemove = function (e) {

				var iEvent = e || event;
				if (disW + (iEvent.clientX - disX) > 350) {
					dragDom.style.width = disW + (iEvent.clientX - disX) + 'px';
				}
			};

			document.onmouseup = function () {
				document.onmousemove = null;
				document.onmouseup = null;
				document.onselectstart = null;
			};
		};
		dragLeft.onmousedown = (e) => {
			document.onselectstart = function () {
				return false;
			};
			// 宽度拖拽
			var iEvent = e || event;
			var disX = iEvent.clientX;
			var disW = dragDom.offsetWidth;
			var OFFLeft = dragDom.offsetLeft;
			document.onmousemove = function (e) {
				const iEvent = e || event;
				const width = disW - (iEvent.clientX - disX);
				if (width > 350) {
					dragDom.style.width = disW - (iEvent.clientX - disX) + 'px';
					dragDom.style.left = OFFLeft + (iEvent.clientX - disX) + 'px';
				}
			};

			document.onmouseup = function () {
				document.onmousemove = null;
				document.onmouseup = null;
				document.onselectstart = null;
			};
		};
		dragBottom.onmousedown = (e) => {
			document.onselectstart = function () {
				return false;
			};
			// 宽度拖拽
			var iEvent = e || event;
			var disY = iEvent.clientY;
			var disH = dragDom.offsetHeight;
			document.onmousemove = function (e) {
				var iEvent = e || event;
				if (disH + (iEvent.clientY - disY) > 200) {
					dragDom.style.height = disH + (iEvent.clientY - disY) + 'px';
					body.style.height = disH + (iEvent.clientY - disY) - 40 + 'px';
					dragBody.style.height = disH + (iEvent.clientY - disY) - 100 + 'px';
				}
			};

			document.onmouseup = function () {
				document.onmousemove = null;
				document.onmouseup = null;
				document.onselectstart = null;
			};
		};
		dragTop.onmousedown = (e) => {
			document.onselectstart = function () {
				return false;
			};
			// 宽度拖拽
			var iEvent = e || event;
			var disY = iEvent.clientY;
			var disH = dragDom.offsetHeight;
			var OOFTop = dragDom.offsetTop;
			document.onmousemove = function (e) {
				var iEvent = e || event;
				if (disH - (iEvent.clientY - disY) > 200) {
					dragDom.style.height = disH - (iEvent.clientY - disY) + 'px';
					body.style.height = disH - (iEvent.clientY - disY) - 40 + 'px';
					dragBody.style.height = disH - (iEvent.clientY - disY) - 100 + 'px';
					dragDom.style.top = OOFTop + (iEvent.clientY - disY) + 'px';
				}
			};

			document.onmouseup = function () {
				document.onmousemove = null;
				document.onmouseup = null;
				document.onselectstart = null;
			};
		};
	}
});