const directives = { 'card': { inserted(el, binding, vnode, oldVnode) { el.classList.add('page-card'); el.style.height = window.innerHeight - 125 + 'px'; function heightHandler(e) { el.style.height = window.innerHeight - 125 + 'px'; } // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听 el.__page_card__ = heightHandler; window.addEventListener('resize', heightHandler); }, unbind(el, binding) { // 解除事件监听 window.removeEventListener('resize', el.__page_card__); delete el.__page_card__; } }, 'dialog-drag': { // 弹窗拖拽 bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.ant-modal-header'); const dragDom = el.querySelector('.ant-modal-content'); 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('%')) { 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; }; } } }, 'clickoutside': { // 初始化指令 bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身,是本身,则返回 if (el.contains(e.target)) { return false; } // 判断指令中是否绑定了函数 if (binding.expression) { // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法 binding.value(e); } } // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听 el.__vueClickOutside__ = documentHandler; document.addEventListener('click', documentHandler); }, update() {}, unbind(el, binding) { // 解除事件监听 document.removeEventListener('click', el.__vueClickOutside__); delete el.__vueClickOutside__; }, } } export default { install: function(Vue) { Object.keys(directives).forEach(key => { Vue.directive(key, directives[key]); }) } }