SWITCH表单

SWITCH表单组件

表单结构示意图

item结构
表单结构如上图所述,表单配置分为profile配置input配置,我们考虑到了尽可能多的场景,并为之准备了不同的结构以应对需求

表单动图

  • item结构

如何使用表单组件

表单基础配置

  Pager({
    data: {
      motto: {  // 一个表单项
        data: [
          title: '文本类表单元素',
          input: [  // 表单具体配置,支持数组和Object数据类型
            {
              id: 'test_switch1',
              type: 'switch',
              title: '切换按钮',
            },
            {
              id: 'test_switch2',
              type: 'switch',
              title: '切换按钮',
              value: true,
            },
            {
              id: 'test_switch3',
              type: 'switch',
              title: '切换按钮',
            },
          ]
        ]
      },
    }
  })

模板

  <ui-form dataSource="{{motto}}" />

表单交互配置

  Pager({
    data: {
      motto: {  // 一个表单项
        title: '文本类表单元素',
        input: [  // 表单具体配置,支持数组和Object数据类型
          {
            id: 'test_text',
            type: 'text',
            title: '标题',
            placeholder: '单选框选择以动态设置该文本框内容',
            itemClass: 'mt-8-r'
          },
          {
            id: 'test_switch4',
            type: 'switch',
            title: '设置内容',
            bindchange: 'switchAction'   // 绑定交互方法
          },
        ]
      },
    },
    switchAction: function (e, param, inst) {
      // inst实例为表单实例
      const {inputData, profile} = param
      if (inputData.id == 'test_switch4') {
        if (inputData.value == true) {
          inst.value('test_text', {  // 切换switch修改文本框内容
            value: '动态设置内容'
          })
        } else {
          inst.value('test_text', {  // 切换switch清空文本框内容
            value: ''
          })
        }
      }
    },
  })

配置说明

profile.title

外部标题

profile.required

外部必选

profile.desc

外部描述结构

input.type

表单组件类型,文本框表单类型'text', 'password', 'number', 'idcard', 'digit', 'dropdown'

input.error

错误结构

input.eye

input表单后部的logo结构

input.eye

input表单后部的logo结构

input.eye

预置文字

input.id/name

表单id

input.value

表单值

input.disabled

表单失效

input.itemClass

表单样式

input.itemStyle

表单样式

input.bindchange

绑定表单change事件