0.0.31 • Published 1 year ago
enn-info-panel v0.0.31
InfoPanel
信息面板组件
示例
<template>
<div>
<InfoPanel :schema="Schema" :data="data" />
</div>
</template>
<script>
import InfoPanel from 'enn-info-panel';
import Schema from './info.schema.json';
export default {
components: {
InfoPanel,
},
data() {
return {
Schema,
data: {},
};
},
}
</script>
API
InfoPanel Attributes
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
schema | Object | 是 | - | 数据信息的 schema |
data | Object | 是 | - | 展示的数据 |
scenario | String | 否 | infoPanel | 环境变量 |
config | Object | 否 | - | 配置项,包括联动内使用的数据 |
hasBorder | Boolean | 否 | true | 控制是否显示边框 |
Tips
- schema 可使用 schema-form-editor 生成,格式参照 schema-form-render 所需 schema 的格式
- schema 中只有 activated、visible 可以控制当前项是否展示
config
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
emptySymbol | String | - | 空值字段填充的符号 | |
closeAutoLabel | Boolean | - | 取消无边框 label 默认值 auto,改为 80px; |
示例
插槽 Slots
<template>
<div>
<InfoPanel :schema="Schema" :data="data" >
<template #itemName="{name, value}">
{{name}}: {{value}}
</template>
</InfoPanel>
</div>
</template>
<script>
import InfoPanel from 'enn-info-panel';
import Schema from './info.schema.json';
export default {
components: {
InfoPanel,
},
data() {
return {
Schema,
data: {},
};
},
}
</script>
联动 scenario
{
"type": "input",
"label": "名称1",
"name": "key1",
"effect": "set('activated', scenario !== 'infoPanel');"
}
info.less
可以用来把 schema-form-render 生成的表单转为信息面板样式 注意:需要自行设置表单的只读或禁用
<SchemaFormRender class="enn-form-info-panel" />
BooleanResult
状态显示组件
- 支持多状态展示其中一种
示例
<template>
<div>
<BooleanResult :value="value"/>
</div>
</template>
<script>
import { BooleanResult } from 'enn-info-panel';
export default {
components: {
BooleanResult,
},
data() {
return {
value: true,
};
},
}
</script>
API
BooleanResult Attributes
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
value | Boolean | 是 | - | 渲染的值 |
config | Object | 渲染的配置项 | ||
minIcon | Boolean | 是否使用点的图标 | ||
status | Array | 多种状态展示 |
config Attributes
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
activeText | String | 是 | true 状态的文案 | |
inactiveText | String | 否 | false 状态的文案 | |
activeIcon | String | el-icon-succes | true 状态的图标 class | |
inactiveIcon | String | el-icon-error | false 状态的图标 class | |
emptySymbol | String | "-" | 空值字段填充的符号 |
示例
<template>
<div>
<BooleanResult :value="value" :config="config" />
</div>
</template>
<script>
import { BooleanResult } from 'enn-info-panel';
export default {
components: {
BooleanResult,
},
data() {
return {
value: true,
config: {
activeText: '启用',
inactiveText: '停用',
activeIcon: 'el-icon-video-play',
inactiveIcon: 'el-icon-video-pause',
},
};
},
}
</script>
status Attributes
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
value | String/Boolean/Number | 状态对应的值 | ||
label | String | 状态的文案 | ||
icon | String | 状态的图标 class | ||
color | String | icon 的颜色 | ||
minColor | String | minIcon 的颜色 |
Tips
- icon 只有 minIcon 为 false 的时候才会使用
- color 和 minColor 会互补,如果 color 没设置,会使用 minColor。反之一样。
示例
<template>
<div>
<BooleanResult :value="value" :status="status" />
</div>
</template>
<script>
import { BooleanResult } from 'enn-info-panel';
export default {
components: {
BooleanResult,
},
data() {
return {
value: 1,
status: [
{
value: 1,
label: '1',
icon: 'el-icon-user-solid',
color: 'red',
minColor: 'pink',
},
{
value: 2,
label: '2',
icon: 'el-icon-star-on',
color: 'green',
minColor: 'lightgreen',
},
{
value: 3,
label: '3',
icon: 'el-icon-s-goods',
color: 'blue',
minColor: 'lightblue',
},
],
};
},
}
</script>
0.0.31
1 year ago
0.0.30
2 years ago
0.0.29
2 years ago
0.0.28
2 years ago
0.0.24
2 years ago
0.0.25
2 years ago
0.0.26
2 years ago
0.0.27
2 years ago
0.0.22
2 years ago
0.0.23
2 years ago
0.0.20
2 years ago
0.0.21
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.0.15
2 years ago
0.0.9
2 years ago
0.0.16
2 years ago
0.0.8
2 years ago
0.0.17
2 years ago
0.0.18
2 years ago
0.0.19
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago