enn-schema-info-panel-vue3 v0.0.1

SchemaInfoPanel

信息面板组件 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>

API

InfoPanel Attributes

Tips

• schema 可使用 schema-form-editor 生成，格式参照 schema-form-render 所需 schema 的格式
• schema 中只有 activated、visible 可以控制当前项是否展示

config

示例

插槽 Slots

<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>

联动 scenario

{
  "type": "input",
  "label": "名称1",
  "name": "key1",
  "effect": "set('activated', scenario !== 'infoPanel');"
}

info.css

可以用来把 schema-form-render 生成的表单转为信息面板样式 注意：需要自行设置表单的只读或禁用

import "enn-schema-info-panel-vue3/lib/info.css";
<SchemaFormRender class="enn-form-info-panel" />