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 使用
  let isEmpty = false
  if (binding.value.open) {
    if (!vnode.data.model.value) {
      isEmpty = true
    }
  }
  if (isEmpty) {
    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 }