enn-status-result-vue3

状态展示组件，支持多状态展示其中一种（原 BooleanResult）

• 注意：使用 element-plus icon 时需要自行引入并注册对应的 icon。

示例

默认状态

<template>
  <div>
    <StatusResult :value="value"/>
  </div>
</template>

<script>
import StatusResult from 'enn-status-result-vue3';

export default {
  components: {
    StatusResult,
  },
  data() {
    return {
      value: true,
    };
  },
}
</script>

config 传入状态

<template>
  <div>
    <StatusResult :value="value" :config="config" />
  </div>
</template>

<script>
import StatusResult from 'enn-status-result-vue3';

export default {
  components: {
    StatusResult,
  },
  data() {
    return {
      value: true,
      config: {
        activeText: '启用',
        inactiveText: '停用',
        activeIcon: 'Check',
        inactiveIcon: 'Close',
      },
    };
  },
}
</script>

status 传入状态

<template>
  <div>
    <StatusResult :value="value" :status="status" />
  </div>
</template>

<script>
import StatusResult from 'enn-status-result-vue3';

export default {
  components: {
    StatusResult,
  },
  data() {
    return {
      value: 1,
      status: [
        {
          value: 1,
          label: '1',
          icon: 'AddLocation',
          color: 'red',
          minColor: 'pink',
        },
        {
          value: 2,
          label: '2',
          icon: 'icon-DeleteLocation',
          color: 'green',
          minColor: 'lightgreen',
        },
        {
          value: 3,
          label: '3',
          icon: 'icon-Search',
          color: 'blue',
          minColor: 'lightblue',
        },
      ],
    };
  },
}
</script>

API

StatusResult Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------- | ------- | ---- | ------ | ---------------- | | value | String/Number/Boolean | 是 | | 渲染的值 | | showIcon | Boolean | | true | 是否展示图标 | | minIcon | Boolean | | false | 是否使用点的图标 | | strictMode | Boolean | | true | 是否使用全等号（===）比较值 | | emptySymbol | String | | "-" | 空值字段填充的符号 | | config | Object | | | 渲染的配置项 | | status | Array | | | 多种状态展示 |

config Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------ | ------ | ---- | -------------- | ---------------------- | | activeValue | String/Boolean/Number | | true | active 状态的值 | | inactiveValue | String/Boolean/Number | | false | inactive 状态的值 | | activeText | String | | 是 | active 状态的文案 | | inactiveText | String | | 否 | inactive 状态的文案 | | activeIcon | String | | SuccessFilled | active 状态的图标（iconfont：class，element-plus icon：name） | | inactiveIcon | String | | CircleCloseFilled | inactive 状态的图标（iconfont：class，element-plus icon：name） | | activeIconColor | String | | #67c23a | active 状态的自定义图标的颜色 | | inactiveIconColor | String | | #e54c2a | inactive 状态的自定义图标的颜色 | | activeMinIconColor | String | | #6eb92c | active 状态的 点图标 的颜色 | | inactiveMinIconColor | String | | #c0c4cc | inactive 状态的 点图标 的颜色 | | emptySymbol | String | | "-" | 空值字段填充的符号 | | minIcon | Boolean | | false | 是否使用点图标 | | showIcon | Boolean | | true | 是否展示图标 | | strictMode | Boolean | | true | 是否使用全等号（===）比较值 |

Tips

• icon 信息字符串，iconfont 传图标的 class（如：编辑图标 icon-edit-outline），element-plus 的 icon 传对应的 icon 名称（如：编辑图标 Edit）。

status item Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------- | --------------------- | ---- | ------ | ---------------- | | value | String/Boolean/Number | | | 状态对应的值 | | label | String | | | 状态的文案 | | icon | String | | | 状态的图标 class | | color | String | | | icon 的颜色 | | minColor | String | | | minIcon 的颜色 |

Tips

• icon 只有 minIcon 为 false 的时候才会使用
• color 和 minColor 会互补，如果 color 没设置，会使用 minColor。反之一样。

组件本地调试

• npm run dev

发包

• lib 为发包后的文件夹