教你用vue自定义指令做一个组件的遮罩层loading效果

时间有限，不上图了。

<div class="w-box-connent" v-whr-loading="isloading"></div>

大概意思就是，有一个div，当isloading==true时候我要给这个div上面蒙上一层遮罩层。

Vue.directive('whr-loading', {
        bind(el, bindingvnode, vnode) {
            let divzhezhao = document.createElement('div')
            divzhezhao.setAttribute('class', 'zhezhao')
            let divbaifenbai = document.createElement('div')
            divbaifenbai.setAttribute('class', 'baifenbai')
            let i = document.createElement('i')
            i.setAttribute('class', 'el-icon-loading')
            divzhezhao.append(divbaifenbai, i)
            el.insertBefore(divzhezhao, el.children[0])
            divzhezhao.setAttribute('style', 'position: absolute;\n' +
                '      width: 100%;\n' +
                '      height: 100%;\n' +
                '      background-color: #0f7188b8;\n' +
                '      text-align: center;\n' +
                '      color:#ffffff96;\n' +
                '      font-size: 12px;')
            divbaifenbai.setAttribute('style','height: 100%;\n' +
                '       width: 0px;\n' +
                '       display: inline-block;\n' +
                '       vertical-align: middle;')
            if (bindingvnode.value == false){
                divzhezhao.style.display = 'none'
            }else {
                divzhezhao.style.display = 'inline'
            }
        },
        update(el, binding, vnode){
            if (binding.value == false){
                el.children[0].style.display = 'none'

            }else {
                el.children[0].style.display = 'inline'
            }
        }
    })

这里的el-icon-loading就是一个小圈在转那个样式。
快去试试吧！
注意这是2.0写法，3.0的同学改一下函数名称就好了。