更新时间:2022-04-26 GMT+08:00
分享

如何自定义组件属性

通过本节您可自定义Widget的一些属性,在用到该Widget的页面中根据具体的场景配置这些属性值。

场景描述

介绍如何给Widget自定义属性以及如何在页面的Widget中使用该属性值。单击链接获取Widget样例包“widget_demo_property.zip”。

场景效果如下图所示。

图1 自定义Widget属性

操作步骤

  1. 参考1,模板选择“widgetPropertyTemplate”新建Widget。示例开发包为“widget_demo_property.zip”。

    1. 在“widget_demo_property.editor.js”的“propertiesConfig”中定义Widget属性,包含属性的类型、名称和在界面展示的标签名。

      如下加粗代码所示,“widget_demo_property.editor.js”中分别定义了text、 checkbox以及select类型的三个属性参数。其中“type”表示该属性的类型;“name”表示该属性的名称;“label”表示该属性在界面展示的标签名;“value”为该属性的默认取值。如果属性是select类型,则需要定义选项“options”。

      widget_demo_property = widget_demo_property.extend({
          /
          Config to define Widget Properties
           */
          propertiesConfig:[{
              config: [{
      				"type": "text",
      				"name": "textProperty",
      				"label": "Text Property",
      				"value": "text"
      			},
      			{
      				"type": "checkbox",
      				"name": "checkboxProperty",
      				"label": "Checkbox Property",
      				"value": "true"
      			},
      			{
      				"type": "select",
      				"name": "selectProperty",
      				"label": "Select Property",
      				"options": [{
      						"label": "option1",
      						"value": "option1",
      						"selected": "true"
      					},
      					{
      						"label": "option2",
      						"value": "option2"
      					}
      				]
      			}
      		]
          }],
      
          /
          Triggered when the user Creates a new widget and used to initialize the widget properties
           */
          create : function(cbk)
          {
              if(cbk)
              {
                  this._super();
                  cbk();
              }
          }
      });
      
      var params = {};
      Studio.registerWidget("widget_demo_property", "widget_demo_property", params);
    2. 在“widget_demo_property.js”中通过定义widgetProperties变量“var widgetProperties = thisObj.getProperties();”,调用“thisObj.getProperties”方法可获取到这些属性。
      var widget_demo_property = StudioWidgetWrapper.extend({
          /
          Triggered when initializing a widget and will have the code that invokes rendering of the widget
           */
          init : function()
          {
              var thisObj = this;
              thisObj._super.apply(thisObj, arguments);
              thisObj.render();
              if((typeof(Studio) != "undefined") && Studio)
              {
                  /
                  Register custom event or action here, and trigger the event afterwards.
                   Studio.registerEvents(thisObj, "", "", EventConfig), 
                   Studio.registerAction(thisObj, "", "", ActionConfig, $.proxy(this.Cbk, this), );
                   thisObj.triggerEvent("", )
                   */
              }
          },
      
          /
          Triggered from init method and is used to render the widget
           */
          render : function()
          {
              var thisObj = this;
              var widgetProperties = thisObj.getProperties();
              var elem = thisObj.getContainer();
              var items = thisObj.getItems();
              var connectorProperties = thisObj.getConnectorProperties();
      
              /
              API to get base path of your uploaded widget API file
               */
              var widgetBasePath = thisObj.getWidgetBasePath();
              if(elem)
              {
                  var vm = new Vue({
      				el: $("#widget_demo_property", elem)[0],
      				data: {
                          form: {
      						textProperty: widgetProperties.textProperty,
      					    checkboxProperty: widgetProperties.checkboxProperty,
      					    selectProperty: widgetProperties.selectProperty
      					}
      				}
      			})
              }
      
              /
              API to bind global events to the item DOM, it should not be deleted if there will some events to trigger in this widget.
               */
              thisObj.sksBindItemEvent();
      
              /
              API to refresh the previously bound events when a resize or orientation change occurs.
               */
              $(window).resize(function() {
                  thisObj.sksRefreshEvents();
              });
          },
      });
    3. 在“widget_demo_property.ftl”中定义渲染页面,属性配置为只读模式。
      <div id="widget_demo_property">
      	<el-form :model="form">
      	  <el-form-item label="Text Property">
      		<el-input v-model="form.textProperty" :readonly="true"></el-input>
      	  </el-form-item>
      	 <el-form-item label="Checkbox Property">
      		<el-input v-model="form.checkboxProperty" :readonly="true"></el-input>
      	  </el-form-item>
      	   <el-form-item label="Select Property">
      		<el-input v-model="form.selectProperty" :readonly="true"></el-input>
      	  </el-form-item>
      	</el-form>
      </div>

  2. 参考6在组件库中上传该Widget包。
  3. 打开一个高级页面,在设计页面左上方单击,从“自定义”组件中拖出刚创建的Widget至右侧空白页面。
  4. 选中该Widget,会在右侧显示该组件的属性配置面板。在“属性”页签下“自定义属性列表”区域中可看到自定义的这三个属性,根据需要进行修改。

    图2 编辑该Widget属性

分享:

    相关文档

    相关产品

close