SmartCommunity/operationSupport/src/utils/directives.js

import Vue from 'vue';

export default {
	install() {
    Vue.directive('view', {
      inserted(el, binding) {
        el.onclick = (e) => {
          let url = e.target.getAttribute('url');
          let $div = document.createElement('div');
          $div.setAttribute('id', 'img-view');
          document.body.appendChild($div);
          $div.innerHTML = `<i class="el-icon-error"></i>
              <span>滚动鼠标滚轮可以放大、缩小图片；点击关闭预览。</span>
              <img src="` + url + `" width="800"/>`
          $div.onclick = (e) => {
            $div.removeEventListener('DOMMouseScroll', scrollFunc);
            window.onmousewheel = document.onmousewheel = null;
            document.body.removeChild($div)
          }
          let i = 800;
          function scrollFunc(e) {
            e = e || window.event;
            if(e.wheelDelta) {
                //IE/Opera/Chrome
                if(parseInt(e.wheelDelta) > 0) {
                    if(i < document.body.clientWidth - 100) {
                        i += 20;
                    }
                } else {
                    if(i > 100) {
                        i -= 20;
                    }
                }
            } else if(e.detail) {
                //Firefox
                if(parseInt(e.wheelDelta) > 0) {
                    if(i < document.body.clientWidth - 50) {
                        i += 20;
                    }
                } else {
                    if(i > 100) {
                        i -= 20;
                    }
                }
              }
              $div.getElementsByTagName('img')[0].setAttribute('style','width: ' + i +'px')
            }
          $div.addEventListener('DOMMouseScroll', scrollFunc, false)
          window.onmousewheel = document.onmousewheel = scrollFunc
        }
      }
    })

    // 提示框，需要绑定data-txt
    Vue.directive('tip', {
      inserted(el, binding) {
        let $div;
        el.addEventListener('mouseover', e => {
          const curStyle = window.getComputedStyle(el, ''); // 获取当前元素的style
          const textSpan = document.createElement('span'); // 创建一个容器来记录文字的width
          // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
          textSpan.style.fontSize = curStyle.fontSize;
          textSpan.style.fontWeight = curStyle.fontWeight;
          textSpan.style.fontFamily = curStyle.fontFamily;
          // 将容器插入body，如果不插入，offsetWidth为0
          document.body.appendChild(textSpan);
          // 设置新容器的文字
          textSpan.innerHTML = el.innerText;
          let flag = textSpan.offsetWidth >= el.offsetWidth;
          if(binding.modifiers.same) {
            flag = textSpan.offsetWidth > el.offsetWidth;
          }
          if (flag) {
            let text = e.target.getAttribute('data-txt') || el.innerText,
                top = e.clientY - e.offsetY,
                left = e.clientX - e.offsetX + e.target.clientWidth/2;
            $div = document.createElement('div');
            $div.setAttribute('class', 'site-tips');
            $div.setAttribute('style', 'top:' + top + 'px;left:' + left + 'px');
            $div.innerHTML = text;
            document.body.appendChild($div);
          }
          // 移除刚刚创建的记录文字的容器
          document.body.removeChild(textSpan);
        })
        el.addEventListener('mouseout', e => {
          if($div) {
            try {
              document.body.removeChild($div);
            } catch(e) {
            }
          }
        })
      }
    })
    Vue.directive('number-input', {
      inserted: (el, binding) => {
        el.addEventListener("keypress", (e) =>{
          e = e || window.event;
          let charcode = e.keyCode || e.which || e.charCode;
          if(charcode == 45) {
            if(e.target.value && (e.target.value[0] !== '-' || e.target.value[0] === '-')) {
              e.preventDefault();
            }
            return
          }
          if(binding.modifiers.float && charcode == 46) {
            if(!e.target.value || (e.target.value && ((e.target.value[0] === '-'  && e.target.value.length < 2) || (e.target.value.length >= 2 && e.target.value.includes('.'))))) {
              e.preventDefault();
            }
            return
          }
          if(!binding.modifiers.float && charcode == 46) {
            e.preventDefault();
            return;
          }
          if(charcode!=8 && charcode!=46 && charcode!=45 && (charcode<48 || charcode>57)){
            if(e.preventDefault){
              e.preventDefault();
            }else{
              e.returnValue = false;
            }
          }
        });
        el.addEventListener("paste", () => false);
        el.addEventListener("dragenter", () => false);
        el.addEventListener("keyup", (e) => {
          e.target.value = e.target.value.replace(/[^\d.-]/gi,'');
        });
      }
    })
    Vue.directive('trim', {
      inserted: (el) => {
        el.addEventListener("keypress", (e) =>{
          e = e || window.event;
          let charcode = e.keyCode || e.which || e.charCode;
          if(charcode === 32) {
            if(e.preventDefault){
              e.preventDefault();
            }else{
              e.returnValue = false;
            }
            return;
          }
        })
      }
    })
    Vue.directive('loadmore', {
      bind(el, binding) {
        el.addEventListener('scroll', function() {
          let sign = 100
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          if (scrollDistance <= sign) {
            binding.value()
          }
        }, true)
      }
    })
    // 输入框输入校验
    Vue.directive('float', {
      inserted: (el) =>{
        el.addEventListener("keypress", (e) =>{
          e = e || window.event;
          let charcode = e.keyCode || e.which || e.charCode;
          let val = e.target.value
          if(val === '-') {
            if(charcode < 48 || charcode > 57) {
              e.preventDefault()
              e.returnValue = false;
              return
            }
          } else if(val === '-0' || val === '0') {
            if(charcode !== 46) {
              e.preventDefault()
              e.returnValue = false
              return
            }
          } else {
            if(val.indexOf('.') !== -1) {
              // 只能输入0-9
              if(charcode < 48 || charcode > 57) {
                e.preventDefault()
                e.returnValue = false;
                return
              }
            } else {
              if(val.length) {
                // 只能输入0-9和.
                if((charcode < 48 || charcode > 57) && charcode != 46) {
                  e.preventDefault()
                  e.returnValue = false
                  return
                }
              } else {
                // 只能输入0-9 . -
                if((charcode < 48 || charcode > 57) && charcode != 46 && charcode != 45) {
                  e.preventDefault()
                  e.returnValue = false
                  return
                }
              }
            }
          }
        });
        el.addEventListener("paste", () => {
          // el.addEventListener('keyup', e => {
          //   setTimeout(() => {
          //   }, 100);
          // })
          // el.addEventListener('blur', e => {
          //   e.target.value = e.target.value.replace(/[^0-9-]*((0{1}|[1-9]\d*)(\.\d{1,})?).*$/, '$1')
          // })
          // e.preventDefault()
          // e.returnValue = false
          // return
        });
        el.addEventListener("dragenter", () => false);
      }
    })
    Vue.directive('txt-tip',{
      inserted(el, binding) {
        let $div;
        el.addEventListener('mouseover', e => {
          // alert("111")
          const curStyle = window.getComputedStyle(el, ''); // 获取当前元素的style
          const textSpan = document.createElement('span'); // 创建一个容器来记录文字的width
          // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
          textSpan.style.fontSize = curStyle.fontSize;
          textSpan.style.fontWeight = curStyle.fontWeight;
          textSpan.style.fontFamily = curStyle.fontFamily;
          textSpan.style.color = curStyle.color;
          // 将容器插入body，如果不插入，offsetWidth为0
          document.body.appendChild(textSpan);
          // 设置新容器的文字
          textSpan.innerHTML = el.innerText;
          let flag = textSpan.offsetWidth >= el.offsetWidth;
          if(binding.modifiers.same) {
            flag = textSpan.offsetWidth > el.offsetWidth;
          }
          // if (flag) {
            let text = e.target.getAttribute('data-txt') || el.innerText,
                top = e.clientY+10,
                left = e.clientX+10;
            $div = document.createElement('div');
            $div.setAttribute('class', 'text-tips');
            $div.setAttribute('style', 'top:' + top + 'px;left:' + left + 'px');
            $div.innerHTML = text;
            $div.style.color=curStyle.color;
            $div.style.borderColor=curStyle.color
            document.body.appendChild($div);
          // }
          // 移除刚刚创建的记录文字的容器
          document.body.removeChild(textSpan);
        })
        el.addEventListener('mouseout', e => {
          if($div) {
            try {
              document.body.removeChild($div);
            } catch(e) {
            }
          }
        })
      }
    })
    Vue.directive('left-txt-tip',{
      inserted(el, binding) {
        let $div;
        el.addEventListener('mouseover', e => {
          const curStyle = window.getComputedStyle(el, ''); // 获取当前元素的style
          const textSpan = document.createElement('span'); // 创建一个容器来记录文字的width
          // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
          textSpan.style.fontSize = curStyle.fontSize;
          textSpan.style.fontWeight = curStyle.fontWeight;
          textSpan.style.fontFamily = curStyle.fontFamily;
          textSpan.style.color = curStyle.color;
          // 将容器插入body，如果不插入，offsetWidth为0
          document.body.appendChild(textSpan);
          // 设置新容器的文字
          textSpan.innerHTML = el.innerText;
          let flag = textSpan.offsetWidth >= el.offsetWidth;
          if(binding.modifiers.same) {
            flag = textSpan.offsetWidth > el.offsetWidth;
          }
            let text = e.target.getAttribute('data-txt') || el.innerText,
                top = e.clientY+10,
                left = e.clientX-40;
            $div = document.createElement('div');
            $div.setAttribute('class', 'text-tips');
            $div.setAttribute('style', 'top:' + top + 'px;left:' + left + 'px');
            $div.innerHTML = text;
            $div.style.color=curStyle.color;
            $div.style.borderColor=curStyle.color
            document.body.appendChild($div);
          document.body.removeChild(textSpan);
        })
        el.addEventListener('mouseout', e => {
          if($div) {
            try {
              document.body.removeChild($div);
            } catch(e) {
            }
          }
        })
        el.addEventListener('click', e => {
          if($div) {
            try {
              document.body.removeChild($div);
            } catch(e) {
            }
          }
        })
      }
    })
    Vue.directive('bottom-txt-tip',{
      inserted(el, binding) {
        let $div;
        el.addEventListener('mouseover', e => {
          const curStyle = window.getComputedStyle(el, ''); // 获取当前元素的style
          const textSpan = document.createElement('span'); // 创建一个容器来记录文字的width
          // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
          textSpan.style.fontSize = curStyle.fontSize;
          textSpan.style.fontWeight = curStyle.fontWeight;
          textSpan.style.fontFamily = curStyle.fontFamily;
          textSpan.style.color = curStyle.color;
          // 将容器插入body，如果不插入，offsetWidth为0
          document.body.appendChild(textSpan);
          // 设置新容器的文字
          textSpan.innerHTML = el.innerText;
          let flag = textSpan.offsetWidth >= el.offsetWidth;
          if(binding.modifiers.same) {
            flag = textSpan.offsetWidth > el.offsetWidth;
          }
            let text = e.target.getAttribute('data-txt') || el.innerText,
                top = e.clientY+20,
                left = e.clientX-40;
            $div = document.createElement('div');
            $div.setAttribute('class', 'text-gray-tips');
            $div.setAttribute('style', 'top:' + top + 'px;left:' + left + 'px');
            $div.innerHTML = text;
            $div.style.color=curStyle.color;
            document.body.appendChild($div);
            document.body.removeChild(textSpan);
        })
        el.addEventListener('mouseout', e => {
          if($div) {
            try {
              document.body.removeChild($div);
            } catch(e) {
            }
          }
        })
        el.addEventListener('click', e => {
          if($div) {
            try {
              document.body.removeChild($div);
            } catch(e) {
            }
          }
        })
      }
    })
	}
}