更新记录

1.3.1（2024-06-06）

描述调整

1.3.0（2024-06-06）

bug修复

1.2.0（2024-06-02）

更新

平台兼容性

ClForm 配置化表单

基于 uniapp 原生开发，通过简单代码即可轻松实现多样化表单展示，代码简洁，提高效率。

属性说明

formList 配置说明

Slot

ClForm 表单方法

Demo

<template>
  <view>
    <CL-ClForm
      ref="ClForm"
      :formList="formList"
      @Cl_FormSubmit="Cl_FormSubmit"
      @key4ClChange="key4ClChange"
    >
            <view slot="key4" style="color: deepskyblue;">key4 插槽</view>
    </CL-ClForm>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 配置表单数据
      data: {
        formList: [
          { title: "单行输入框", label: "input", placeholder: "请输入", key: "key1", value: "", toastMsg: "请输入单行输入框", colspan: 2, hr: true },
          { title: "多行输入框", label: "textarea", placeholder: "请输入", key: "key2", value: "", toastMsg: "请输入多行输入框", column: true, colspan: 2, hr: true },
          { title: "开关选择器", label: "switch", key: "key3", value: true, toastMsg: "请选择开关选择器", colspan: 2, hr: true },
          { title: "单项选择器", label: "radio", key: "key4", array: [{ name: '男', value: 'male' }, { name: '女', value: 'female' }], toastMsg: "请选择单项选择器", required: true, colspan: 2, hr: true },
          { title: "多项选择器", label: "checkbox", key: "key5", array: [{ name: '男', value: 'male' }, { name: '女', value: 'female' }], toastMsg: "请选择多项选择器", colspan: 2, hr: true },
          { title: "标签选择器", label: "tag-choose", key: "key6", array: [{ name: '男', value: 'male' }, { name: '女', value: 'female' }], toastMsg: "请选择标签选择器", column: true, colspan: 2, hr: true },
          { title: "普通选择器", label: "picker", placeholder: "请选择", key: "key7", rangeKey: "rangeKey", value: "", array: [{ rangeKey: '男', value: 'male' }, { rangeKey: '女', value: 'female' }], toastMsg: "请选择普通选择器", hr: true },
          { title: "日期选择器", label: "date-picker", placeholder: "请选择", key: "key8", value: "", toastMsg: "请选择日期选择器", hr: true },
          { title: "地区选择器", label: "region-picker", placeholder: "请输入", key: "key9", value: [], toastMsg: "请选择地区选择器", hr: true },
          { title: "电话", label: "input", type: "number", placeholder: "请输入", key: "phone", value: "", toastMsg: "请输入电话", hr: true },
          { title: "上传图片", subTitle: "(最多上传9张)", label: "uploader", key: "key10", value: [], api: "https://jsonplaceholder.typicode.com/posts/", AsyncUpload: false, maxCount: 9, toastMsg: "请上传图片", hr: true },
          { title: "上传视频", subTitle: "(最多上传9个)", label: "video", key: "key11", value: [], api: "https://jsonplaceholder.typicode.com/posts/", AsyncUpload: false, maxCount: 9, toastMsg: "请上传视频", hr: true }
        ]
      },
    },
    methods: {
        Cl_FormSubmit(e) {
            console.log("🚀 ~ e:", e)
        },
        key4ClChange(e) {
            console.log("🚀 ~ e:", e)
        }
    }
  }
}
</script>

反馈&&交流

如有问题，可以评论区反馈