Zs Admin

Appearance

zs-status 状态组件 ​

功能描述 ​

zs-status 是一个灵活的状态展示组件，用于根据传入的值（字符串或数字）动态渲染对应的图标、颜色和文本。支持通过默认配置快速使用，也允许通过 customConfig 自定义或扩展状态项。

属性 ​

属性名类型说明
valuestring/number当前状态值，默认为 0。组件会根据该值从配置中查找对应的状态信息进行渲染。
customConfigRecord<string/number, { icon?: string; color?: string; text?: string }>可选。用于覆盖默认状态配置或添加新的状态项。仅需提供需要自定义的字段，其余将使用默认值或兜底值。

默认配置 ​

值图标类名颜色文本
0icon-filled-minus-circle#f53f3f禁用
1icon-filled-check-circle#00b42a启用

使用示例 ​

基础用法 ​

vue
<template>
  <div>
    <ZsStatus :value="record.status" />
  </div>
</template>

<script lang="ts" setup>
import ZsStatus from '@/components/zs-status';

const record = {
  status: 1, // 将显示绿色对勾图标 + “启用”文本
};
</script>

自定义状态项 ​

vue
<template>
  <div>
    <!-- 显示自定义的“审核中”状态 -->
    <ZsStatus 
      :value="2" 
      :customConfig="{
        2: { icon: 'icon-time', color: '#faad14', text: '审核中' }
      }"
    />
    
    <!-- 覆盖默认状态：将“禁用”改为灰色 -->
    <ZsStatus 
      :value="0" 
      :customConfig="{
        0: { color: '#999', text: '已停用' }
      }"
    />
  </div>
</template>

<script lang="ts" setup>
import ZsStatus from '@/components/zs-status';
</script>