<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>directive用法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-loading=isLoading>
<div>{{data}}</div>
<button @click="update">更新</button>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data() {
return{
isLoading:false,
data:''
}
},
methods:{
update() {
this.isLoading = true
setTimeout(() => {
this.data = '获取到的用户数据'
this.isLoading = false
},3000)
}
}
})
Vue.directive('loading',{
update(el,binding,vonde) {
console.log(el,binding,vonde)
if(binding.value) {
const div = document.createElement('div') // createElement() 方法通过指定名称创建一个元素
div.innerText = '加载中...'
div.setAttribute('id','loading') // setAttribute() 方法添加指定的属性，并为其赋指定的值。
div.style.position = 'fixed'
div.style.top = 0
div.style.left = 0
div.style.width = '100%'
div.style.height = '100%'
div.style.display = 'flex'
div.style.justifyContent = 'center' // justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
div.style.alignItems = 'center' // align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
div.style.color = 'white'
div.style.background = 'rgba(0,0,0,0.7)'
document.body.append(div)
} else {
document.body.removeChild(document.getElementById('loading')) //removeChild() 方法可从子节点列表中删除某个节点。
}
}
})
</script>
