enn-info-panel

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 可以控制当前项是否展示，联动中的代码只有 set 生效
• 不支持嵌套 子表单、容器等
• 下拉菜单等数据需要自行处理

示例

插槽

<template>
  <div>
    <InfoPanel :schema="Schema" :data="data" >
      <template #itemName="{value}">
        {{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

Boolean 状态显示组件

示例

<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			是否使用点的图标

config Attributes

参数	类型	必填	默认值	说明
activeText	String		成功	true 状态的文案
inactiveText	String		失败	false 状态的文案
activeIcon	String		el-icon-succes	true 状态的图标 class
inactiveIcon	String		el-icon-error	false 状态的图标 class