SOURCE

import { nextTick, createApp } from 'vue';

import { ElEmpty } from 'element-plus';
import 'element-plus/theme-chalk/el-empty.css';

// v-empty 无数据展示指令
// v-empty="status"  或者  v-empty="{image:'xxx',description:'xxx', visible: bool}"
// status是必须是 boolean 基础数据类型
/*
 * image
 * description
 * visible
 */
export default {
  created (el, { value }) {
    const {
      image = new URL('@/assets/images/no-data-bg.png', import.meta.url),
      description = '暂无数据'
    } = value || {};
    const target = el;
    if (!target.style.getPropertyValue('position')) {
      target.style.setProperty('position', 'relative');
    }
    const instance = createApp(ElEmpty, {
      image,
      description
    }).mount(document.createElement('div'));
    nextTick(() => {
      instance.$el.style.setProperty('display', 'none');
      target.appendChild(instance.$el);
      target.__empty__ = instance.$el;
    });
  },
  updated (el, { value }) {
    nextTick(() => {
      const target = el;
      const visible = typeof value === 'boolean' ? value : value?.visible;
      target.classList[visible ? 'add' : 'remove']('is-target-empty');
      target.__empty__.style.setProperty('display', visible ? 'flex' : 'none');
    });
  },
  beforeUnmount (el) {
    const target = el;
    target.removeChild(target.__empty__);
    target.classList.remove('is-target-empty');
    target.__empty__ = null;
  },
};


/* 样式
.is-target-empty {
  min-height: 200px;
}
.el-empty {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
*/