注册方法
Vue.directive(‘my-directive’, {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
<template>
<div>
<h1 v-loading="isloading">{{msg}}</h1>
<button type="button" @click.prevent="update">更新</button>
</div>
</template>
```import Vue from 'vue';
Vue.directive("loading",{
update(el,binding,vnode){
if(binding.value){
const div = document.createElement("div")
div.innerText = "加载中。。。。"
div.setAttribute("id","loading")
div.style.position = "fixed";
div.style.width = '100%';
div.style.height = "100vh";
div.style.left = "0";
div.style.top = "0";
div.style.background = "rgba(0,0,0,0.7)";
div.style.color = "white";
document.body.append(div)
}else{
document.body.removeChild(document.getElementById("loading"))
}
}
})
export default {
name: 'HelloWorld',
data () {
return {
msg: '',
isloading:false
}
},
methods:{
update(){
this.isloading = true;
setTimeout(()=>{
this.msg = "数据更新";
this.isloading = false;
},3000)
}
}
}
在这里插入代码片