directive.js 3.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import Vue from 'vue'
  2. //图片裁剪vue指令
  3. Vue.directive('load', function(el, binding) {
  4. let imgDom = document.createElement('img')
  5. imgDom.style.position = 'absolute'
  6. imgDom.style.top = '-999px'
  7. imgDom.style.opacity = 0
  8. imgDom.src = el.src
  9. el.src = ''
  10. imgDom.onload = () => {
  11. let width = imgDom.width
  12. let height = imgDom.height
  13. if (width > height) {
  14. el.style.height = '100%'
  15. el.style.width = 'auto'
  16. el.style.position = 'absolute'
  17. el.style.left = '50%'
  18. el.style.top = '0'
  19. el.style.transform = 'translateX(-50%)'
  20. el.style.webkitTransform = "translateX(-50%) translateY(0)";
  21. el.style.MozTransform = "translateX(-50%) translateY(0)";
  22. el.style.msTransform = "translateX(-50%) translateY(0)";
  23. el.style.OTransform = "translateX(-50%) translateY(0)";
  24. } else if (width < height) {
  25. el.src = imgDom.src
  26. el.style.width = '100%'
  27. el.style.height = 'auto'
  28. el.style.position = 'absolute'
  29. el.style.top = '50%'
  30. el.style.left = '0'
  31. el.style.transform = 'translateY(-50%) translateX(0)'
  32. el.style.webkitTransform = "translateY(-50%) translateX(0)";
  33. el.style.MozTransform = "translateY(-50%) translateX(0)";
  34. el.style.msTransform = "translateY(-50%) translateX(0)";
  35. el.style.OTransform = "translateY(-50%) translateX(0)";
  36. } else {
  37. el.style.width = '100%'
  38. el.style.height = '100%'
  39. el.style.position = 'absolute'
  40. el.style.top = '0'
  41. el.style.left = '0'
  42. el.style.transform = 'translateY(0) translateX(0)'
  43. el.style.webkitTransform = "translateY(0) translateX(0)";
  44. el.style.MozTransform = "translateY(0) translateX(0)";
  45. el.style.msTransform = "translateY(0) translateX(0)";
  46. el.style.OTransform = "translateY(0) translateX(0)";
  47. }
  48. // if (el.alt == '视频资料' || el.alt == '视频') {
  49. // el.style.width = '52px'
  50. // el.style.height = '42px'
  51. // el.style.display = 'block'
  52. // el.style.margin = 'auto'
  53. // el.style.marginTop = '60px'
  54. // el.style.position = 'initial'
  55. // el.style.top = '0'
  56. // el.style.left = '0'
  57. // el.style.transform = 'translateY(0) translateX(0)'
  58. // el.style.webkitTransform = "translateY(0) translateX(0)";
  59. // el.style.MozTransform = "translateY(0) translateX(0)";
  60. // el.style.msTransform = "translateY(0) translateX(0)";
  61. // el.style.OTransform = "translateY(0) translateX(0)";
  62. // }
  63. el.src = imgDom.src
  64. }
  65. })
  66. //点击空白处隐藏div指令
  67. Vue.directive('clickOutside', {
  68. // 初始化指令
  69. bind(el, binding, vnode) {
  70. function documentHandler(e) {
  71. // 这里判断点击的元素是否是本身,是本身,则返回
  72. if (el.contains(e.target)) {
  73. return false;
  74. }
  75. // 判断指令中是否绑定了函数
  76. if (binding.expression) {
  77. // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
  78. binding.value(e);
  79. }
  80. }
  81. // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  82. el.__vueClickOutside__ = documentHandler;
  83. document.addEventListener('click', documentHandler);
  84. },
  85. update() {},
  86. unbind(el, binding) {
  87. // 解除事件监听
  88. document.removeEventListener('click', el.__vueClickOutside__);
  89. delete el.__vueClickOutside__;
  90. },
  91. })