如何自定义组件的高级属性？

问题描述

在页面开发时，选中某组件，单击鼠标右键选择“高级设置”，可对组件进行高级属性配置。请问，如何自定义组件的“高级设置”呢？

例如，系统提供了预置的时间组件，选中该组件，单击鼠标右键选择“高级设置”，可查看到如图2所示的高级属性设置，这些属性是如何定义实现的？

图1 鼠标右键

图2 高级属性设置

解决方法

1. 下载样例组件包。
   1. 参考如何登录经典版环境配置中操作，登录经典版应用设计器。
   2. 在左侧导航栏中，选择“应用管理 > 页面资产管理 > 组件”，可查看到当前环境该租户下所有的组件资产。
   3. 单击某一样例预置组件，例如“时间展示”组件，进入组件详情页。
      图3 单击组件
      
   4. 单击“下载”，下载组件包到本地，并解压。
      图4 下载组件
      

      解压组件包后，该组件的高级属性主要在“.ftl”和“.js”文件中定义。

      图5 解压后
      

2. 参考样例组件，开发自定义组件的高级属性。
   1. 在自定义组件的“.ftl”文件中，编写高级设置弹框的dom结构。

      示例代码如下：

      	<div id="edit-time" style="display: none;">
      		<template id="edit-wrap">
      			<div class="timmer_edit">
      				<div class="content">
      					<div class="content-wrapper">
      					......
      					......
      					</div>
      				</div>
      			</div>
      		</template>
      	</div>

   2. 在自定义组件的“.js”文件中，编写高级设置弹框的vue实例。

      其中，save函数用来实现单击设置弹框界面保存按钮时的逻辑，该函数中使用平台提供的savePropertiesForWidget方法用来持久化属性值。该方法用于在开发态中，保存当前组件的高级设置属性信息，参数为要设置的相关属性集对象。

      示例代码如下：

              if (!Studio.inReader) {
                var editVm = new Vue({
                  template: $("#edit-wrap", elem)[0],
      	    i18n: i18n,
                  data() {
                    return {
                      commonProps: thisObj.vm.commonProps,
                      styleProps: thisObj.vm.styleProps,
                      isIndeterminate: true,
                      checkAll: true,
                      yearPos: [
                          {
                            label: thisObj.i18nVM.$t("setting.left"),
                            value: "left"
                          },
                          {
                            label: thisObj.i18nVM.$t("setting.center"),
                            value: "center"
                          },
                          {
                            label: thisObj.i18nVM.$t("setting.right"),
                            value: "right"
                          }
                        ],
                      timePos: [
                          {
                            label: thisObj.i18nVM.$t("setting.left"),
                            value: "left"
                          },
                          {
                            label: thisObj.i18nVM.$t("setting.center"),
                            value: "center"
                          },
                          {
                            label: thisObj.i18nVM.$t("setting.right"),
                            value: "right"
                          }
                        ],
                      weekPos: [
                        {
                          label: thisObj.i18nVM.$t("setting.left"),
                          value: "left"
                        },
                        {
                          label: thisObj.i18nVM.$t("setting.center"),
                          value: "center"
                        },
                        {
                          label: thisObj.i18nVM.$t("setting.right"),
                          value: "right"
                        }
                      ]
                    };
                  },
                  methods: {
                    save() {
                      var _this = this;
                      magno.savePropertiesForWidget({
                        styleProps: JSON.stringify(_this.styleProps),
                        commonProps: JSON.stringify(_this.commonProps)
                      });
                    }
                  }
                });

   3. 在自定义组件的“.js”文件中，使用平台提供的sksAddSetting方法，设置高级页面弹框的标签名称。

      示例代码如下：

                thisObj.sksAddSetting(editVm, {
                  title: thisObj.i18nVM.$t("setting.timewidgetsetting")
                });