用 css 实现空列表自动提示 “空状态”

css实现

/* 空列表状态通用css */
.list-auto-empty:empty::after {
  content: attr(empty);
  color: gray;
  margin: 50px auto 0;
  background-image: url('empty_data.png');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 224px;
  height: 140px;
  padding-top: 140px;
  text-align: center;
}

html使用

<div class="list list-auto-empty" empty="Empty data">

注意：attr(empty) 用于获取 empty 属性值，设置提示文字

特殊情况，无效（包含空格）

<div class="list-auto-empty" empty="Empty data"> </div>

增加脚本处理（文件发生变化后重新执行）

// 使用jQuery遍历所有的div元素
$('.list-auto-empty').each(function() {
    // 使用$.trim()函数去除元素内容的前后空白字符
    let content = $.trim($(this).text());
    // 如果内容为空，则添加'empty-like'类名
    if (content === '') $(this).addClass('empty-like');
});

最终css

.list-auto-empty.empty-like::after,
.list-auto-empty:empty::after {
  content: attr(empty);
  color: gray;
  margin: 50px auto 0;
  background-image: url('empty_data.png');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 224px;
  height: 140px;
  padding-top: 140px;
  text-align: center;
}

最终辅助 js 脚本（监听.list-auto-empty中的变化重新处理.empty-like）

// 空列表辅助方法
function listEmptyHandler() {
  const func = (_this) => {
    // 使用trim()函数去除元素内容的前后空白字符
    const content = $(_this).text();
    const html = $(_this).html();
    // 如果内容为空，则添加'empty-like'类名
    if (content.trim() == '' && html.trim() == '') $(_this).addClass('empty-like');
    else $(_this).removeClass('empty-like');
  };

  $('.list-auto-empty').each(function () {
    func(this);
    const $element = $(this)[0];
    const observer = new MutationObserver(() => func(this));
    if ($element) {
      observer.observe($element, {
        attributes: true, // 观察属性变化
        childList: true, // 观察子节点的变化
        subtree: true, // 观察后代节点的变化
        characterData: true, // 观察文本内容的变化
        characterDataOldValue: true, // 观察文本内容变化时，保存旧值
      });
    }
  });
}

使用 html示例

<div class="list list-auto-empty" empty="Empty data">