526互联

Vue的自定义指令

发布时间 2023-11-18 18:19:33作者: 凌碎瞳缘

在使用自定义指令的标签写入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')
      }
    }
  }
}