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。反之一样。
组件本地调试
发包