# 使用华为云Astro轻应用自定义组件在页面中的属性
#### 期望实现效果
组件预置的属性不能满足您的业务需求时，支持为组件自定义属性。例如，为组件widget_demo_property自定义Text Property、Checkbox Property和Select Property三个属性。组件中自定义属性在页面中的最终呈现效果如[图1]所示。
图1自定义组件属性   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001913334952.png "点击放大")
#### 功能实现方法
1. 下载组件模板。 
   1. 在华为云Astro轻应用服务控制台的主页中，单击"进入首页"，进入应用开发页面。
   
   2. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001920404592.png)，选择"环境管理 \> 环境配置"，进入环境配置。
   
   3. 在主菜单中，选择"维护"。
   
   4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件模板"。
   
   5. 在组件列表中，单击"widgetPropertyTemplate"，进入模板详情页。
   
   6. 单击"下载"，设置组件的名称为"widget_demo_property"，单击"保存"，将模板下载到本地。
      如果选择"下载原始模板"，下载到本地的组件包中，组件名称不会被修改。
      图2保存模板   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001992242997.png "点击放大") 
   
   
   
   
2. 自定义组件属性。
   
   1. 在"widget_demo_property.editor.js"的"propertiesConfig"中，定义Widget属性，包含属性的类型、名称和在界面展示的标签名。 如下加粗代码所示，"widget_demo_property.editor.js"中分别定义了text、 checkbox以及select类型的三个属性参数。
      ```
      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);
      ```
      其中：
      - type：属性的类型。
      
      - name：属性的名称。
      
      - label：属性在界面展示的标签名。
      
      - value：属性的默认取值。如果属性是select类型，则需要定义选项"options"。
       
   
   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>
      ```
      
   
   4. 将开发好的组件代码压缩到后缀为".zip"的压缩文件中，也可以单击[链接](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/widget_demo_property.zip)，获取组件样例包"widget_demo_property.zip"。
   
   
   
   
3. 在组件库中上传组件包。
   
   1. 在环境配置的"维护 \> 全局元素 \> 页面资产管理 \> 组件"中，单击"提交新组件"。
   
   2. 在提交新组件页面，设置组件基本信息，并上传压缩文件，单击"提交"。
      图3上传自定义组件示例   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001955765684.png "点击放大")
      表1上传自定义组件参数说明 
      | 参数    | 说明                                           | 示例                                                                                                          |
      |:---|:---|:---|
      | 名字    | 新提交组件的名称，系统会根据组件包名称自动填充。                     | widgetdemoproperty                                                                                          |
      | 上传源文件 | 组件源文件包。                                      | 选择[2]中的widget_demo_property.zip |
      | 场景    | 组件包的应用场景，可同时选择多个。                            | 高级页面                                                                                                        |
      | 发行说明  | 组件的描述信息，按需进行设置。此处配置的信息，将会在组件详情页的"概况"页签中进行显示。 | 自定义组件                                                                                                       |
         
      
   
   
   
   
4. 关闭Vue3框架渲染组件开关。 
   本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。
   图4界面报错   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001953304910.png)
   1. 在应用设计器中，单击左侧导航栏中的"设置"。
   
   2. 在"高级设置"中，取消勾选"页面组件的渲染框架由Vue2升级为Vue3"开关。
      图5取消选中   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001987234061.png "点击放大") 
   
   
   
   
5. 在应用设计器中，选择"界面"，单击高级页面后的"+"，新建一个高级页面。
6. 在设计页面左上方单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001945694025.png)，从"自定义"组件中拖拽[3]中的组件至右侧空白页面。
7. 选中该组件，会在右侧显示该组件的属性配置面板。
8. 在"属性"页签下，"自定义属性列表"区域中可看到自定义的三个属性，根据需要进行修改。 
   图6编辑该Widget属性   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001913494868.png "点击放大")