更新记录

0.95（2023-03-28） 下载此版本

-1完善了demo注释 -2新加了richText富文本显示 -3新加了countList属性，子级可以自动计算结果，例如：countList:['a+b=c','a*b=d']

0.9（2023-03-20） 下载此版本

-1.新加在线demo -2.新加主题，优化代码

0.8（2023-03-19） 下载此版本

-1优化逻辑 -2新加config.theme,添加主题 -3新加了pretendForm，把普通元素伪装成表单形式

平台兼容性

formListV3 动态 表单组件

uniapp 表单组件，可根据自身需求配置生成表单，集合身份证验证，手机验证，发送验证码等一般业务需求,可根据用户选择改变表单元素

在线H5-demo form-list-vue3

平台兼容

QQ群

821391485

安装

直接导入即可

代码演示

基本用法

html

<form-list-vue3 :putList='putList' :value="value" :config="config"/>

属性说明(props)

putList 传入一个数组

putList 数组元素包含属性

const putList=[
  {
    el:'input',//标签名，input是调用对象
    name:'内容',//内容，如果是布局元素代表渲染内容，如果是输入元素，name代表label，未填未选会以：请输入${name}来提示，非必填，
    code:'xxx',//标记代码，布局元素可以不填，输入元素必填
    style:{},//当前元素的样式
    class:'',//当前元素的使用的样式的 class
    ...
  }
]

putList>item

config

//现可以传入一个或多个主题
config={
  theme:{
    xxx:{},
    xxx2:{}
  }
}

putList 完整案例

const putList = [
  {
    name: '朴素的注册',//布局元素的内容
    style: {// 传入的样式
      fontSize: '20px',
      padding: '20px 0 0 0',
      textAlign: 'center',
    },
  },

  {
    el: 'view',
    code: 'first',
    theme:'icons',// 内置主題（login top icons ）,或者自定义主题，不想用主题也可以集中设置 defaultItem
    class: 'login',// 内置的一部分样式，登录注册的样式
    defaultItem: { // 在子级里添加输入元素，在其父级好混入共有样式
      childBind:{ // 在有加号时每一个表单的样式处理
        style:{
          borderBottom: '1px solid #f00'
        }
      },
      item:{ // 每一列的样式
        style:{
          borderBottom: '1px solid #FFE9E9FF'
        }
      },
      names: { //对于label名字的影响
        name: '：',// 名字后跟的字符串
        style:{
          color:'#969696'
        }
      },
      beforeStar: {
        name: '*',// 星号样式和字符串
      },
      errors: { // 报错提示的样式，
        style: {
          position: 'absolute',
          top: '100%',
          left: '120px',
          marginTop: '3px',
          fontSize: '10px',
          color: '#ff0000'
        }
      },
      formItem:{//对于输入元素输入位置的样式
        style:{
          width:'100%'
        },
      },
    },
    children: [// 子级，一般在输入元素下不能再放入子级，在布局元素下放子级，子级的子级依然可以放子级，这里是可以递归的
      {
        el: 'input',
        required: true,
        name: '手机号',
        code: 'phone',
        checkType: 'phone',// 内置的验证类型
        checkFun:(value)=>value.phone < 0 ? '不能输入小于0的数字' : '',// 自定义验证，通不过的验证返回报错
        type:'number',// input的type，可以在uni官网上看对应的组件的属性
        maxlength:11,
        defaultValue:19999999999,// 默认值，重置表单时会重置到这个结果
      },
      ...
    ]
  },
  {
    formMethods: 'resetFields',// 重置表单到默认值，当你在item里设置了
    name: '重置',
    style: {
      position: 'fixed',
      bottom: '10px',
      zIndex: 100,
      left: 0,
      boxSizing: 'border-box',
      width: '50%',
      background: '#d00a0f',
      padding: '15px',
      color: '#fff',
      textAlign: 'center',
    },
    click: (obj) => {// 重置表单这里拿不到什么东西
      console.log('----',obj)
    }
  },
  {
    el: 'view',
    formMethods: 'validate',// formMethods 有三种 validate验证当前表单以及子级表单 resetFields重置当前表单， validArray 验证部分数据
    name: '提交',
    style: {
      position: 'fixed',
      bottom: '10px',
      zIndex: 100,
      right: 0,
      boxSizing: 'border-box',
      width: '50%',
      padding: '15px',
      color: '#fff',
      background: '#0080ff',
      textAlign: 'center',
    },
    click: ({valid, values}) => {
      console.log('values', valid, values)
      if (valid) { // 上传到后端 values
      }
    },
  }
]