属性编辑器

属性编辑器

• 属性编辑器是组件的属性在[属性设置区域]内的编辑组件. 按钮的主题属性编辑器如下图:
  

  组件设置属性编辑器

  /**
   *  设置按钮属性编辑器
   */
  getAttrEditors() {
      let atrr = super.getAttrEditors();
      atrr.push(new SwitchAttrEditor(this, {
          attr: "isHideText",
          labelCaption: "隐藏标题",
          title: "隐藏标题",
      }))
      atrr.push(new IconAttrEditor(this, {
          attr: "icon",
          labelCaption: "添加图标",
          title: "如果按钮需要添加图标，请选择配置",
      }))
      atrr.push(new InputAttrEditor(this, {
          attr: "iconImg",
          labelCaption: "Base64图标",
          title: "如果内置的图片没有合适的，请直接使用base64生成的图片"
      }))
      atrr.push(new InputAttrFormulaEditor(this, {
          attr: "iconWidth",
          labelCaption: "图标的宽度设置",
          title: "只针对图标的宽度设置，字体图标设置无效",
          placeholder: "例如:100px",
      }))
      atrr.push(new InputAttrFormulaEditor(this, {
          attr: "iconHeight",
          labelCaption: "图标的高度设置",
          title: "只针对图片图标的高度设置，字体图标设置无效",
          placeholder: "例如:100px",
      }))
      atrr.push(new SelectAttrEditor(this, {
          attr: "theme",
          labelCaption: "按钮主题",
          title: "按钮主题",
          list() {
              return [{
                  key: btnTheme.default,
                  value: "默认主题"
              },
              {
                  key: btnTheme.primary,
                  value: "原始按钮"
              },
              {
                  key: btnTheme.normal,
                  value: "百搭按钮"
              },
              {
                  key: btnTheme.warm,
                  value: "暖色按钮"
              },
              {
                  key: btnTheme.danger,
                  value: "警告按钮"
              },
              {
                  key: btnTheme.link,
                  value: "连接按钮"
              },
              {
                  key: btnTheme.disabled,
                  value: "禁用按钮"
              }]
          }
      }))
      atrr.push(new SelectAttrEditor(this, {
          attr: "size",
          labelCaption: "按钮尺寸",
          title: "按钮尺寸",
          list() {
              return [{
                  key: btnSize.default,
                  value: "默认"
              },
              {
                  key: btnSize.lg,
                  value: "大型按钮"
              },
              {
                  key: btnSize.sm,
                  value: "小型按钮"
              },
              {
                  key: btnSize.xs,
                  value: "迷你型按钮"
              },
              {
                  key: btnSize.fluid,
                  value: "自适按钮"
              }]
          }
      }))
      atrr.push(new InputAttrFormulaEditor(this, {
          attr: "radius",
          labelCaption: "按钮圆角",
          title: "按钮圆角",
          placeholder: "例如:100px",
      }))
      atrr.push(new ButtonItemsAttrEditor(this, {
          attr: "popMenuItems",
          title: "选项",
          btnText: '下拉按钮',
      }));
  
      return atrr;
  }

  参考

  组件的类继承关系列表
  组件开发环境搭建