JTBC 组件文档

基础用法

SchemaForm 属于自定义内置元素，用来根据 data 属性值，渲染一个表单。

渲染一个表单

<div is="jtbc-schema-form" data="[{"text":"标题","name":"title","type":"text","required":true,"extra":[]},{"text":"分类","name":"category","type":"select","required":true,"extra":[],"data":[{"text":"分类一","value":2}]},{"text":"图片","name":"image","type":"upload","required":true,"extra":{"text-upload":"上传","text-preview":"预览","text-remove":"删除","action":"/xxxx/?action=upload&scene=image"}},{"text":"内容","name":"content","type":"editor","required":false,"extra":[]},{"text":"附件","name":"attachment","type":"attachment","required":false,"extra":{"text":"{\"upload\":\"\\u4e0a\\u4f20\",\"insert\":\"\\u63d2\\u5165\",\"remove\":\"\\u5220\\u9664\",\"selectFromDB\":\"\\u4ece\\u5a92\\u4f53\\u5e93\\u4e2d\\u9009\\u62e9\",\"filesList\":\"\\u6587\\u4ef6\\u5217\\u8868\",\"emptyTips\":\"\\u6682\\u65f6\\u8fd8\\u6ca1\\u6709\\u4efb\\u4f55\\u6587\\u4ef6\\uff0c\\u5982\\u9700\\u4e0a\\u4f20\\u8bf7\\u70b9\\u51fb\\u4e0a\\u4f20\\u6309\\u94ae\"}","action":"/xxxx?action=upload&scene=attachment","partner":"content"}},{"text":"发布","name":"published","type":"switch","required":false,"extra":[]}]"></div>

data 属性, 中的常用字段的解读

• text：表单项目名称，如上面的“标题、分类、图片等”
• type: 用来指定具体的表单项组件名，如：文本框对应的是text；下拉框对应的是 select 等
• required: 用来声明此项是否为必填项，true 必填，false 选填。
• extra: 这个字段不同的组件，有不同的值，一般是一对象或数组。会放到具体组件组件中介绍。
• data: 这个字段用在，组件需要额外数据，渲染的时候。如下拉框的下拉选项数据。
• value: 这个字段是编辑的时候，表单项的值。

自动生成

好在这些数据，一般不需要手动编辑。通过后台的 开发维护 -> 模块管理 -> 模块设置，经过简单的几步设置，系统可以自动生成上面的 data 属性值。

事件 builded

builded 监听表单渲染已经完成。例如，完成后插入新的 html 标签。代码如下

// ...
scarf.delegateEventListener('div[is="jtbc-schema-form"]', 'builded', function(){
      const htmlString = `<item field="swept-import">
          <label class="name">数据</label>
          <div class="contnt">
            <button class="b4 import">数据导入</button>
            <input type="file" class="file" name="swept" style="display: none;" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          </div>
        </item>`;
      scarf.querySelector('div[is="jtbc-schema-form"] item[field="swept"]').insertAdjacentHTML('beforebegin', htmlString);
});
// ...