信息面板组件 for Vue3
- npm run dev
- lib 为发包后的文件夹
<template>
<div>
<InfoPanel :schema="Schema" :data="data" />
</div>
</template>
<script>
import InfoPanel from 'enn-schema-info-panel-vue3';
import Schema from './info.schema.json';
export default {
components: {
InfoPanel,
},
data() {
return {
Schema,
data: {},
};
},
}
</script>
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
schema | Object | 是 | - | 数据信息的 schema |
data | Object | 是 | - | 展示的数据 |
scenario | String | 否 | infoPanel | 环境变量 |
config | Object | 否 | - | 配置项,包括联动内使用的数据 |
hasBorder | Boolean | 否 | true | 控制是否显示边框 |
- schema 可使用 schema-form-editor 生成,格式参照 schema-form-render 所需 schema 的格式
- schema 中只有 activated、visible 可以控制当前项是否展示
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
emptySymbol | String | - | 空值字段填充的符号 | |
closeAutoLabel | Boolean | - | 取消无边框 label 默认值 auto,改为 80px; |
<template>
<div>
<InfoPanel :schema="Schema" :data="data" >
<template #itemName="{name, value}">
{{name}}: {{value}}
</template>
</InfoPanel>
</div>
</template>
<script>
import InfoPanel from 'enn-schema-info-panel-vue3';
import Schema from './info.schema.json';
export default {
components: {
InfoPanel,
},
data() {
return {
Schema,
data: {},
};
},
}
</script>
{
"type": "input",
"label": "名称1",
"name": "key1",
"effect": "set('activated', scenario !== 'infoPanel');"
}
可以用来把 schema-form-render 生成的表单转为信息面板样式 注意:需要自行设置表单的只读或禁用
import "enn-schema-info-panel-vue3/lib/info.css";
<SchemaFormRender class="enn-form-info-panel" />