文档首页> 应用魔方 AppCube> 常见问题> 高级页面> 如何自定义组件的高级设置?
更新时间:2022-04-01 GMT+08:00
分享

如何自定义组件的高级设置?

问题描述

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

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

图1 鼠标右键
图2 高级属性设置

解决方法

  1. 下载样例组件包。
    1. 在AppCube环境上方单击“管理”,进入管理页面。
    2. 在左侧导航栏中,选择“应用管理 > 页面资产管理 > 组件”,可查看到当前环境该租户下所有的组件资产,单击某一样例预置组件,例如“时间展示”组件。进入组件详情页。
      图3 单击组件
    3. 单击“下载”,下载组件包到本地,并解压。
      图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")
                });
分享:

高级页面所有常见问题

more

close