Skip to main content

自定义组件

进阶:自定义propOption属性

propOption支持多种数据采集组件,方便用户配置属性。以下属性都需要配置到data中

1.输入框

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "请输入图片地址",
          type: "input",
        },
      },

2.日期选择器

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "日期选择器",
          type: "date",
        },
      },

3.时间选择器

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "时间选择器",
          type: "time",
        },
      },

4.图标

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "图标",
          type: "icon",
        },
      },

5.颜色选择器

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "颜色",
          type: "color",
        },
      },

6.下拉框

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "下拉款",
          type: "option",
          options: [
            {
              value: "fill",
              label: "fill",
            },
            {
              value: "contain",
              label: "contain",
            },
          ],
        },
      },

7.切换器

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "切换器",
          type: "radioButton",
          options: [
            {
              label: "default",
              value: "default",
            },
            {
              label: "button",
              value: "button",
            },
          ],
        },
      },

8.开关

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "开关",
          type: "switch",
        },
      },

9.代码编辑框

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "代码编辑框",
          type: "code",
        },
      },

10.提示信息

      // 扩展属性对象
      propObj: {
        // 自定义属性时,必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "提示信息",
          type: "word",
          link: "https://www.baidu.com",
        },
      },