12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- import Vue from 'vue'
- //图片裁剪vue指令
- Vue.directive('load', function(el, binding) {
- let imgDom = document.createElement('img')
- imgDom.style.position = 'absolute'
- imgDom.style.top = '-999px'
- imgDom.style.opacity = 0
- imgDom.src = el.src
- el.src = ''
- imgDom.onload = () => {
- let width = imgDom.width
- let height = imgDom.height
- if (width > height) {
- el.style.height = '100%'
- el.style.width = 'auto'
- el.style.position = 'absolute'
- el.style.left = '50%'
- el.style.top = '0'
- el.style.transform = 'translateX(-50%)'
- el.style.webkitTransform = "translateX(-50%) translateY(0)";
- el.style.MozTransform = "translateX(-50%) translateY(0)";
- el.style.msTransform = "translateX(-50%) translateY(0)";
- el.style.OTransform = "translateX(-50%) translateY(0)";
- } else if (width < height) {
- el.src = imgDom.src
- el.style.width = '100%'
- el.style.height = 'auto'
- el.style.position = 'absolute'
- el.style.top = '50%'
- el.style.left = '0'
- el.style.transform = 'translateY(-50%) translateX(0)'
- el.style.webkitTransform = "translateY(-50%) translateX(0)";
- el.style.MozTransform = "translateY(-50%) translateX(0)";
- el.style.msTransform = "translateY(-50%) translateX(0)";
- el.style.OTransform = "translateY(-50%) translateX(0)";
- } else {
- el.style.width = '100%'
- el.style.height = '100%'
- el.style.position = 'absolute'
- el.style.top = '0'
- el.style.left = '0'
- el.style.transform = 'translateY(0) translateX(0)'
- el.style.webkitTransform = "translateY(0) translateX(0)";
- el.style.MozTransform = "translateY(0) translateX(0)";
- el.style.msTransform = "translateY(0) translateX(0)";
- el.style.OTransform = "translateY(0) translateX(0)";
- }
- // if (el.alt == '视频资料' || el.alt == '视频') {
- // el.style.width = '52px'
- // el.style.height = '42px'
- // el.style.display = 'block'
- // el.style.margin = 'auto'
- // el.style.marginTop = '60px'
- // el.style.position = 'initial'
- // el.style.top = '0'
- // el.style.left = '0'
- // el.style.transform = 'translateY(0) translateX(0)'
- // el.style.webkitTransform = "translateY(0) translateX(0)";
- // el.style.MozTransform = "translateY(0) translateX(0)";
- // el.style.msTransform = "translateY(0) translateX(0)";
- // el.style.OTransform = "translateY(0) translateX(0)";
- // }
- el.src = imgDom.src
- }
- })
- //点击空白处隐藏div指令
- Vue.directive('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__;
- },
- })
|