vue自定义指令

在main.js文件定义自定义指令

Vue.directive('defaultSelect', {
  componentUpdated (el, bindings) {
    const defaultValues = bindings.value //获取设置的不可编辑默认值
    console.log(defaultValues)
    // 将默认值的close图标隐藏掉
    const dealStyle = (tags) => {
      //循环将默认值数量的 close 图标隐藏
      tags.forEach((el, index) => {
        if (el.childNodes[1]) {
          el.childNodes[1].style.display = 'inline-block' // close 图标展示
        }
        if (defaultValues && defaultValues.length && defaultValues.indexOf(el.innerText) > -1) {
          el.childNodes[1].style.display = 'none' // close 图标隐藏掉
        }
      })
    }
    const tags = el.querySelectorAll('.el-tag')
    if (tags.length === 0) {
      setTimeout(() => {
        const tagTemp = el.querySelectorAll('.el-tag')
        dealStyle(tagTemp)
      })
    } else {
      dealStyle(tags)
    }
  }
})

 使用

 v-defaultSelect="defaultSelect"

 defaultSelect: [], //默认带出建设单位不能

功能