TEXT类表单

文本框表单组件

表单结构示意图

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

表单动图

  • item结构
  • item结构

如何使用表单组件

表单配置

  Pager({
    data: {
      motto: {  // 一个表单项
        data: [
          title: '文本类表单元素',
          input: [  // 表单具体配置,支持数组和Object数据类型
            {type: 'text', id: 'username', title: '用户名', placeholder: '请输入用户名' },
            {type: 'text', id: 'email', title: '邮  箱', error: '错误提示信息', placeholder: '接收信息的安全邮箱'},
            {type: 'text', id: 'mobile', title: '手机号', error: '手机错误提示信息', desc: '一段描述性的代码', placeholder: '请输入手机号码'},
          ]
        ]
      },
    }
  })

模板

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

配置说明

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

表单样式