(vue)自定义指令实现loading状态

dom.js

function hasClass( elements,cName ){
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
}
function addClass( elements,cName ){
  elements.className += " " + cName;
}
function removeClass( elements,cName ){
  if( hasClass( elements,cName ) ){
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)", 'g' )," " ); // replace方法是替换
  }
}
export  {
  hasClass,
  addClass,
  removeClass
}

directives.js

import {addClass, removeClass, hasClass} from '../../api/dom'

//暂无数据
function nodata() {
  return {
    bind(el) {
      el.style.background = "#fff";
      el.style.position = "relative"
      var div = document.createElement('div');
      div.innerHTML = "<div class='noData'>暂无数据</div>";
      div.className = "global_nodata";
      div.style.display = "none"
      el.appendChild(div)
    },
    update(el, binding) {
      // el.child()
      // console.log(binding.value)
      if(binding.value) {
        el.getElementsByClassName('global_nodata')[0].style.display = 'block'
      } else {
        el.getElementsByClassName('global_nodata')[0].style.display = 'none'
      }
    }
  }
}

//该行业暂未开放
function notmt() {
  return {
    bind(el) {
      el.style.background = "#fff";
      el.style.position = "relative"
      var div = document.createElement('div');
      div.innerHTML = "<div class='noData'>该行业暂未开放</div>";
      div.className = "global_nodata";
      div.style.display = "none"
      el.appendChild(div)
    },
    update(el, binding) {
      // el.child()
      // console.log(binding.value)
      if(binding.value) {
        el.getElementsByClassName('global_nodata')[0].style.display = 'block'
      } else {
        el.getElementsByClassName('global_nodata')[0].style.display = 'none'
      }
    }
  }
}


//loading
function loading() {
  return {
    bind(el, binding) {
      // var load = `
      //       <div class="__loading">
      //         <div></div>
      //         <div></div>
      //         <div></div>
      //       </div>
      //      `;
      var load = `
        <div class="__loading">
          <div class="GIF"></div>
        </div>
      `;
      var value = binding.value;
      var loadDiv = document.createElement('div');

      loadDiv.innerHTML = load;
      addClass(loadDiv, '__loading_box');
      el.style.position = 'relative';
      el.appendChild(loadDiv)
    },
    update(el, binding) {
      var chiden = el.getElementsByClassName('__loading_box')[0];
      if (binding.value) {
        chiden.style.display = 'block';
      } else {
        chiden.style.display = 'none'
      }
    }
  }
}
export {
  nodata,
  loading,
  notmt
}

css

//遮罩层
.__ald__mask{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(55,55,55,.6);
  height: 100%;
  z-index: 1000;
}

.__charts_tip{
  height: 30px;
  display: flex;
  align-items: center;
  padding:0 12px;
  background: #fff;
  opacity: 0.6;
  font-size: 14px;
  color: #333333;
  border-radius:2px;
}

firtes.js

// 千分符
const toMillesimal = (val) => {
  return (val/1).toLocaleString()
};

//小数，转百分百
const toRatio = (val) => {
  return  Number(val * 100).toFixed(2) + '%'
};

export {
  toMillesimal,
  toRatio
}

main.js引入注册

import * as filters from './global/firtes/filters'
import * as directives from './global/directives/index'

//全局注册directive
Object.keys(directives).forEach(key=>{
  Vue.directive(key,directives[key]())
})
//注册全局filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
});