在使用自定义指令的标签写入v-'自定义指令名'
<template>
<div class="box" v-loading="loading">
</div>
</template>
export default {
data () {
return {
loading:true
}
},
}
公共配置,写在如main.js的公共js中
Vue.directive('loading',{
inserted(el,binding){//在组件刚从浏览器渲染出来时执行
binding.value?el.classList.add('loading'):el.classList.remove('loading')
},
update(el,binding){//在组件中的该自定义指令对应的值发生改变时执行
binding.value?el.classList.add('loading'):el.classList.remove('loading')
}
})
局部配置,写在使用自定义指令的vue页面中
export default {
data () {
return {
loading:true
}
},
directives:{
loading:{
inserted(el,binding){
binding.value?el.classList.add('loading'):el.classList.remove('loading')
},
update(el,binding){
binding.value?el.classList.add('loading'):el.classList.remove('loading')
}
}
}
}
标签:el,Vue,自定义,classList,binding,loading,指令 From: https://www.cnblogs.com/cyknote/p/17840848.html