diff --git a/src/directive/dialogDrag/dialogDrag.js b/src/directive/dialogDrag/dialogDrag.js new file mode 100644 index 000000000..8e271e253 --- /dev/null +++ b/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; + }; + }; + } +}; diff --git a/src/directive/dialogDrag/index.js b/src/directive/dialogDrag/index.js new file mode 100644 index 000000000..537450254 --- /dev/null +++ b/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); diff --git a/src/directive/dialogDragWidth/dialogDragWidth.js b/src/directive/dialogDragWidth/dialogDragWidth.js new file mode 100644 index 000000000..7d032cb77 --- /dev/null +++ b/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; + }; + }; + } +}; diff --git a/src/directive/dialogDragWidth/index.js b/src/directive/dialogDragWidth/index.js new file mode 100644 index 000000000..3ee2ad0fa --- /dev/null +++ b/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); diff --git a/src/directive/drag/drag.js b/src/directive/drag/drag.js new file mode 100644 index 000000000..69979448d --- /dev/null +++ b/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; + }; + }; + } +}; diff --git a/src/directive/drag/index.js b/src/directive/drag/index.js new file mode 100644 index 000000000..7bba5ebce --- /dev/null +++ b/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); diff --git a/src/directive/focus/focus.js b/src/directive/focus/focus.js new file mode 100644 index 000000000..7c3b68b65 --- /dev/null +++ b/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(); + } + } +}; diff --git a/src/directive/focus/index.js b/src/directive/focus/index.js new file mode 100644 index 000000000..f9d4f2332 --- /dev/null +++ b/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); diff --git a/src/directive/quickMenuDrag/index.js b/src/directive/quickMenuDrag/index.js new file mode 100644 index 000000000..5a176f844 --- /dev/null +++ b/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); diff --git a/src/directive/quickMenuDrag/quickMenuDrag.js b/src/directive/quickMenuDrag/quickMenuDrag.js new file mode 100644 index 000000000..000031662 --- /dev/null +++ b/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; + }; + }; + } +}; diff --git a/src/directive/waves/index.js b/src/directive/waves/index.js new file mode 100644 index 000000000..44264f6f0 --- /dev/null +++ b/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); diff --git a/src/directive/waves/waves.css b/src/directive/waves/waves.css new file mode 100644 index 000000000..af7a7efd9 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/directive/waves/waves.js b/src/directive/waves/waves.js new file mode 100644 index 000000000..eb2fa2cb6 --- /dev/null +++ b/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]; + } +}; diff --git a/src/directives.js b/src/directives.js deleted file mode 100644 index dba79ca51..000000000 --- a/src/directives.js +++ /dev/null @@ -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; - }; - }; - } -}); diff --git a/src/main.js b/src/main.js index 7d13b4a18..f9ffc387f 100644 --- a/src/main.js +++ b/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);