SanoUI

Appearance

Empty 空状态 ​

空状态组件，用于数据为空时的占位展示。

基础用法 ​

html
<div id="demo-empty"></div>

<script>
  const empty = new SaEmpty('#demo-empty', {
    description: '暂无数据'
  });
</script>
加载 SanoUI 组件中...

自定义描述 ​

通过 description 配置自定义描述文字。

html
<div id="demo-empty-custom"></div>

<script>
  const empty = new SaEmpty('#demo-empty-custom', {
    description: '这里什么都没有'
  });
</script>
加载 SanoUI 组件中...

自定义图片 ​

通过 imageSize 配置图片大小，或通过自定义 image 使用自定义图片。

html
<div id="demo-empty-image"></div>

<script>
  // 自定义图片大小
  const empty1 = new SaEmpty('#demo-empty-image', {
    description: '自定义图片',
    imageSize: 150
  });
  
  // 自定义图片
  const empty2 = new SaEmpty('#demo-empty-image', {
    description: '自定义图片',
    image: 'https://example.com/empty.png'
  });
</script>
加载 SanoUI 组件中...

API ​

构造函数参数 ​

参数说明类型默认值
container容器选择器或元素string | HTMLElement-
options配置选项SaEmptyOptions{}

配置选项 ​

参数说明类型默认值
description描述文字string'暂无数据'
image自定义图片地址string-
imageSize图片大小number120

方法 ​

方法名说明参数返回值
setDescription设置描述文字description: stringvoid
destroy销毁实例-void

示例代码 ​

手动创建实例 ​

javascript
const empty = new SaEmpty('#my-empty', {
  description: '暂无数据',
  imageSize: 120
});

// 更新描述
empty.setDescription('加载失败，请重试');

根据状态显示 ​

javascript
function renderEmpty(container, status) {
  let empty;
  
  if (status === 'empty') {
    empty = new SaEmpty(container, {
      description: '暂无数据'
    });
  } else if (status === 'error') {
    empty = new SaEmpty(container, {
      description: '加载失败，请重试'
    });
  } else if (status === 'no-result') {
    empty = new SaEmpty(container, {
      description: '没有找到相关内容'
    });
  }
  
  return empty;
}

实际使用场景 ​

场景 1：表格空状态 ​

在表格数据为空时显示空状态。

html
<div id="empty-table-container" style="height: 300px; position: relative;"></div>
<button class="sa-button sa-button--primary" onclick="toggleEmpty()" style="margin-top: 1rem;">切换状态</button>

<script>
  let isEmpty = true;
  let emptyInstance = null;
  let tableInstance = null;
  
  function toggleEmpty() {
    const container = document.getElementById('empty-table-container');
    
    if (isEmpty) {
      // 显示表格
      if (emptyInstance) {
        emptyInstance.destroy();
        emptyInstance = null;
      }
      
      tableInstance = new SaTable(container, {
        columns: [
          { field: 'name', label: '姓名', width: 120 },
          { field: 'email', label: '邮箱', width: 200 }
        ],
        data: [
          { name: '张三', email: 'zhangsan@example.com' },
          { name: '李四', email: 'lisi@example.com' }
        ]
      });
      
      isEmpty = false;
    } else {
      // 显示空状态
      if (tableInstance) {
        tableInstance.destroy();
        tableInstance = null;
      }
      
      emptyInstance = new SaEmpty(container, {
        description: '暂无数据',
        imageSize: 120
      });
      
      isEmpty = true;
    }
  }
  
  // 初始显示空状态
  toggleEmpty();
</script>
加载 SanoUI 组件中...

场景 2：搜索无结果 ​

在搜索无结果时显示空状态。

html
<div id="search-empty-container" style="height: 200px; position: relative;"></div>
<button class="sa-button sa-button--primary" onclick="search()" style="margin-top: 1rem;">搜索</button>

<script>
  function search() {
    const container = document.getElementById('search-empty-container');
    container.innerHTML = '';
    
    // 模拟搜索无结果
    const empty = new SaEmpty(container, {
      description: '没有找到相关内容',
      imageSize: 100
    });
  }
</script>
加载 SanoUI 组件中...

场景 3：列表空状态 ​

在列表数据为空时显示空状态，并提供操作按钮。

html
<div id="list-empty-container" style="height: 300px; position: relative;"></div>

<script>
  SA.init('body');
  
  const container = document.getElementById('list-empty-container');
  const empty = new SaEmpty(container, {
    description: '还没有任何数据，点击下方按钮添加'
  });
  
  // 添加操作按钮
  const button = document.createElement('button');
  button.className = 'sa-button sa-button--primary';
  button.textContent = '添加数据';
  button.style.marginTop = '20px';
  button.onclick = () => {
    alert('添加数据');
  };
  container.appendChild(button);
</script>
加载 SanoUI 组件中...

场景 4：加载失败状态 ​

在数据加载失败时显示错误提示。

html
<div id="error-empty-container" style="height: 200px; position: relative;"></div>
<button class="sa-button sa-button--primary" onclick="loadData()" style="margin-top: 1rem;">加载数据</button>

<script>
  SA.init('body');
  
  async function loadData() {
    const container = document.getElementById('error-empty-container');
    container.innerHTML = '';
    
    try {
      // 模拟 API 调用
      await new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error('网络错误')), 1000);
      });
    } catch (error) {
      // 显示错误状态
      const empty = new SaEmpty(container, {
        description: '加载失败，请重试',
        imageSize: 100
      });
      
      // 添加重试按钮
      const retryBtn = document.createElement('button');
      retryBtn.className = 'sa-button sa-button--primary';
      retryBtn.textContent = '重试';
      retryBtn.style.marginTop = '20px';
      retryBtn.onclick = () => loadData();
      container.appendChild(retryBtn);
    }
  }
</script>
加载 SanoUI 组件中...

场景 5：动态更新描述 ​

根据不同的状态动态更新空状态的描述文字。

html
<div id="dynamic-empty-container" style="height: 200px; position: relative;"></div>
<div style="margin-top: 1rem; display: flex; gap: 10px;">
  <button class="sa-button" onclick="setEmpty()">无数据</button>
  <button class="sa-button" onclick="setError()">加载失败</button>
  <button class="sa-button" onclick="setNoResult()">无搜索结果</button>
</div>

<script>
  SA.init('body');
  
  let emptyInstance = null;
  
  function setEmpty() {
    const container = document.getElementById('dynamic-empty-container');
    if (emptyInstance) {
      emptyInstance.destroy();
    }
    emptyInstance = new SaEmpty(container, {
      description: '暂无数据'
    });
  }
  
  function setError() {
    const container = document.getElementById('dynamic-empty-container');
    if (emptyInstance) {
      emptyInstance.setDescription('加载失败，请重试');
    } else {
      emptyInstance = new SaEmpty(container, {
        description: '加载失败，请重试'
      });
    }
  }
  
  function setNoResult() {
    const container = document.getElementById('dynamic-empty-container');
    if (emptyInstance) {
      emptyInstance.setDescription('没有找到相关内容');
    } else {
      emptyInstance = new SaEmpty(container, {
        description: '没有找到相关内容'
      });
    }
  }
  
  // 初始状态
  setEmpty();
</script>
加载 SanoUI 组件中...

Released under the MIT License.

Copyright © 2025 SanoUI