1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- 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]);
- })
- }
- }
|