utils/directives/index.js

// 当目标变量为空时显示空文案
const emptyChange = (el, binding, vnode) => {
  // binding.value为文本 配合v-html 使用
  if (typeof binding.value === 'string') {
    if (!vnode.data.domProps.innerHTML.trim()) {
      el.classList.add('gray-color')
      el.innerHTML = binding.value
    } else {
      el.classList.remove('gray-color')
    }
    return
  }
  // binding.value为对象{open:true,text:'空文案'} 配合v-model 使用
  vnode.child.$nextTick(() => {
    let isEmpty = false
    if (binding.value.open) {
      if (!vnode.data.model.value) {
        isEmpty = true
      }
    }
    if (isEmpty) {
    // console.log('hide-child', el.classList.contains('hide-child'))
      if (!el.classList.contains('hide-child')) {
        el.classList.add('hide-child', 'gray-color')
        el.appendChild(document.createTextNode(binding.value.text))
      }
    } else {
      if (el.classList.contains('hide-child')) {
        el.classList.remove('hide-child', 'gray-color')
        el.removeChild(el.lastChild)
      }
    }
  })
}
const empty = {
  bind: emptyChange,
  update: emptyChange
}
export { empty }