directive.js 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. const directives = {
  2. 'card': {
  3. inserted(el, binding, vnode, oldVnode) {
  4. el.classList.add('page-card');
  5. el.style.height = window.innerHeight - 125 + 'px';
  6. function heightHandler(e) {
  7. el.style.height = window.innerHeight - 125 + 'px';
  8. }
  9. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  10. el.__page_card__ = heightHandler;
  11. window.addEventListener('resize', heightHandler);
  12. },
  13. unbind(el, binding) {
  14. // 解除事件监听
  15. window.removeEventListener('resize', el.__page_card__);
  16. delete el.__page_card__;
  17. }
  18. },
  19. 'dialog-drag': { // 弹窗拖拽
  20. bind(el, binding, vnode, oldVnode) {
  21. const dialogHeaderEl = el.querySelector('.ant-modal-header');
  22. const dragDom = el.querySelector('.ant-modal-content');
  23. dialogHeaderEl.style.cursor = 'move';
  24. // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  25. const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
  26. dialogHeaderEl.onmousedown = (e) => {
  27. // 鼠标按下,计算当前元素距离可视区的距离
  28. const disX = e.clientX - dialogHeaderEl.offsetLeft;
  29. const disY = e.clientY - dialogHeaderEl.offsetTop;
  30. // 获取到的值带px 正则匹配替换
  31. let styL, styT;
  32. // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  33. if(sty.left.includes('%')) {
  34. styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
  35. styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
  36. }else {
  37. styL = +sty.left.replace(/\px/g, '');
  38. styT = +sty.top.replace(/\px/g, '');
  39. };
  40. document.onmousemove = function (e) {
  41. // 通过事件委托,计算移动的距离
  42. const l = e.clientX - disX;
  43. const t = e.clientY - disY;
  44. // 移动当前元素
  45. dragDom.style.left = `${l + styL}px`;
  46. dragDom.style.top = `${t + styT}px`;
  47. //将此时的位置传出去
  48. //binding.value({x:e.pageX,y:e.pageY})
  49. };
  50. document.onmouseup = function (e) {
  51. document.onmousemove = null;
  52. document.onmouseup = null;
  53. };
  54. }
  55. }
  56. },
  57. 'clickoutside': {
  58. // 初始化指令
  59. bind(el, binding, vnode) {
  60. function documentHandler(e) {
  61. // 这里判断点击的元素是否是本身,是本身,则返回
  62. if (el.contains(e.target)) {
  63. return false;
  64. }
  65. // 判断指令中是否绑定了函数
  66. if (binding.expression) {
  67. // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
  68. binding.value(e);
  69. }
  70. }
  71. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  72. el.__vueClickOutside__ = documentHandler;
  73. document.addEventListener('click', documentHandler);
  74. },
  75. update() {},
  76. unbind(el, binding) {
  77. // 解除事件监听
  78. document.removeEventListener('click', el.__vueClickOutside__);
  79. delete el.__vueClickOutside__;
  80. },
  81. }
  82. }
  83. export default {
  84. install: function(Vue) {
  85. Object.keys(directives).forEach(key => {
  86. Vue.directive(key, directives[key]);
  87. })
  88. }
  89. }