单选按钮组件

本组件主要实现表单中单选按钮的功能，单选按钮的列表可根据静态数据或者数据资源来配置。当单击单选按钮时可触发数据改变交互事件来向其他组件传递数据。

目录结构

form-radio              // 组件文件加名
	config.json         // 属性配置文件
	index.js	        // 组件解析文件
	thumbnail.png       // 组件图片
	script.js           // 依赖的脚本文件
    style.css           // 样式文件

config.json

{
  "name": "form-radio",
  "type": "test",
  "title": "单选按钮组件",
  "width": 300,
  "height": 300,
  "dependencies": ["style.css", "script.js"], // 配置依赖
  "option": {
    "name": {
      // name用于单选按钮的标签名称
      "type": "text",
      "name": "标签名称",
      "placeholder": "请输入",
      "default": "选项按钮"
    }
  },
  "data": {
    "static": [
      {
        "label": "类型一", // 用于显示
        "value": "1" // 实际值
      },
      {
        "label": "类型二",
        "value": "2"
      }
    ],
    "matchs": {
      "label": {
        "name": "显示标签",
        "template": "{0}",
        "field": [
          {
            "fieldName": "label",
            "fieldAlias": "label"
          }
        ]
      },
      "value": {
        "name": "值",
        "template": "{0}",
        "field": [
          {
            "fieldName": "value",
            "fieldAlias": "value"
          }
        ]
      }
    },
    "rowLimit": 100
  },
  "interact": {
    "events": "数据改变事件",
    "filters": true
  }
}

index.js

define(function() {
  "use strict";
  return {
    // 渲染主方法
    render: function(widget) {
      // 容器
      const container = this.$container();
      // 设置容器样式
      container.style.color = "#fff";
      container.style.fontSize = "38px";
      this.update(widget);
      // 组件渲染完成
      this.$emit("finish", true);
    },
    // 当widget属性改变时调用update方法更新DOM
    update: function(widget) {
      const that = this;
      const container = that.$container();
      // 生成选项按钮DOM结构
      container.className += " widget-form-radio";
      container.innerHTML = this.createDom(widget);
      const input = container.getElementsByTagName("input");
      for (let i = 0; i < input.length; i++) {
        // input绑定onchange事件
        input[i].onchange = function() {
          const eventValue = {};
          const fieldName = widget.interact.events[0].filters[0].field;
          eventValue[fieldName] = this.value;
          // 触发event-vars事件，传递绑定字段实际值
          that.$emit("event-vars", eventValue);
        };
      }
    },
    // 生成选项按钮DOM结构
    createDom: function(widget) {
      let html = '<label class="red">' + widget.option.name + "</label>";
      // 根据配置的数据生成input
      if (widget.data.objectData) {
        widget.data.objectData.forEach((item, i) => {
          // input的value为数据匹配中value的值
          const labelField = widget.data.dataAnalysis.label.field[0];
          // 显示为数据匹配中label的值
          const valueField = widget.data.dataAnalysis.value.field[0];
          if (labelField && valueField) {
            html +=
              '<br/><input type="radio" name="radio" value="' +
              item[valueField.fieldName] +
              '"><span>' +
              item[labelField.fieldName] +
              "</span>";
          }
        });
      }
      return html;
    },
  };
});

script.js

(function() {
  console.log("test");
})();

style.css

.widget-form-radio .red {
  color: red;
}
.widget-form-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0 15px;
}