拆分指令

src/directive/dialogDrag/dialogDrag.js

@@ -0,0 +1,54 @@
+import store from '@/store';
+
+export default {
+	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;
+			};
+		};
+	}
+};

src/directive/dialogDrag/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import install from './dialogDrag';
+
+const dialogDrag = function(Vue) {
+	Vue.directive('dialogDrag', install);
+};
+
+Vue.use(dialogDrag);

src/directive/dialogDragWidth/dialogDragWidth.js

@@ -0,0 +1,25 @@
+export default {
+	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;
+			};
+		};
+	}
+};

src/directive/dialogDragWidth/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import install from './dialogDragWidth';
+
+const dialogDragWidth = function(Vue) {
+	Vue.directive('dialogDragWidth', install);
+};
+
+Vue.use(dialogDragWidth);

src/directive/drag/drag.js

@@ -0,0 +1,106 @@
+export default {
+	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;
+			};
+		};
+	}
+};

src/directive/drag/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import install from './drag';
+
+const drag = function(Vue) {
+	Vue.directive('drag', install);
+};
+
+Vue.use(drag);

src/directive/focus/focus.js

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

src/directive/focus/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import install from './focus';
+
+const focus = function(Vue) {
+	Vue.directive('focus', install);
+};
+
+Vue.use(focus);

src/directive/quickMenuDrag/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import install from './quickMenuDrag';
+
+const quickMenuDrag = function(Vue) {
+	Vue.directive('quickMenuDrag', install);
+};
+
+Vue.use(quickMenuDrag);

src/directive/quickMenuDrag/quickMenuDrag.js

@@ -0,0 +1,45 @@
+export default {
+	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;
+			};
+		};
+	}
+};

src/directive/waves/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import install from './waves';
+
+const waves = function(Vue) {
+	Vue.directive('waves', install);
+};
+
+Vue.use(waves);

src/directive/waves/waves.css

@@ -0,0 +1,26 @@
+.waves-ripple {
+    position: absolute;
+    border-radius: 100%;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-clip: padding-box;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+}
+
+.waves-ripple.z-active {
+    opacity: 0;
+    -webkit-transform: scale(2);
+    -ms-transform: scale(2);
+    transform: scale(2);
+    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
+}

src/directive/waves/waves.js

@@ -0,0 +1,72 @@
+import './waves.css';
+
+const context = '@@wavesContext';
+
+function handleClick(el, binding) {
+	function handle(e) {
+		const customOpts = Object.assign({}, binding.value);
+		const opts = Object.assign({
+			ele: el, // 波纹作用元素
+			type: 'hit', // hit 点击位置扩散 center中心点扩展
+			color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+		},
+		customOpts
+		);
+		const target = opts.ele;
+		if (target) {
+			target.style.position = 'relative';
+			target.style.overflow = 'hidden';
+			const rect = target.getBoundingClientRect();
+			let ripple = target.querySelector('.waves-ripple');
+			if (!ripple) {
+				ripple = document.createElement('span');
+				ripple.className = 'waves-ripple';
+				ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
+				target.appendChild(ripple);
+			} else {
+				ripple.className = 'waves-ripple';
+			}
+			switch (opts.type) {
+			case 'center':
+				ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px';
+				ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px';
+				break;
+			default:
+				ripple.style.top =
+            (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
+              document.body.scrollTop) + 'px';
+				ripple.style.left =
+            (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
+              document.body.scrollLeft) + 'px';
+			}
+			ripple.style.backgroundColor = opts.color;
+			ripple.className = 'waves-ripple z-active';
+			return false;
+		}
+	}
+
+	if (!el[context]) {
+		el[context] = {
+			removeHandle: handle
+		};
+	} else {
+		el[context].removeHandle = handle;
+	}
+
+	return handle;
+}
+
+export default {
+	bind(el, binding) {
+		el.addEventListener('click', handleClick(el, binding), false);
+	},
+	update(el, binding) {
+		el.removeEventListener('click', el[context].removeHandle, false);
+		el.addEventListener('click', handleClick(el, binding), false);
+	},
+	unbind(el) {
+		el.removeEventListener('click', el[context].removeHandle, false);
+		el[context] = null;
+		delete el[context];
+	}
+};

src/directives.js

@@ -1,283 +0,0 @@
-/* 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;
-			};
-		};
-	}
-});

src/main.js

@@ -19,7 +19,13 @@ import router from './router';
 import '@/icons'; // icon
 import '@/permission'; // permission control
 import '@/scripts/GlobalPlugin';
-import '@/directives';
+// import '@/directives';
+import '@/directive/dialogDrag/index.js';
+import '@/directive/dialogDragWidth/index.js';
+import '@/directive/drag/index.js';
+import '@/directive/focus/index.js';
+import '@/directive/quickMenuDrag/index.js';
+import '@/directive/waves/index.js';
 import messages from '@/i18n/index';
 
 Vue.use(ElementUI);