更新记录

1.5.1（2022-07-11） 下载此版本

优化

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.2.0 app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

注意！！！

导入即用 全端支持

2.0插件地址 https://ext.dcloud.net.cn/plugin?id=5842 （基于uview2.0）

1.0插件地址 https://ext.dcloud.net.cn/plugin?id=8755 （基于uview1.0）

有问题 可评论 看到及时回复

本插件基于 uview1.0进行重构 使用需要引入uview1.0支持
[ 点击uview1.0官网地址 ](https://www.uviewui.com/)

2.页面使用

<template>
  <view class="content">
    <active-form ref="activeForm" v-model="formData" num></active-form>

    <view class="subform" @click="sub">提交表单</view>
  </view>
</template>

<script>
import ActiveForm from "@/components/active-formv1";

export default {
  components: {
    ActiveForm,
  },
  data() {
    return {
      formData: [
        {
          id: "sadasgh",
          placeholder: "请选择年龄段",
          label: "年龄",
          type: "radio",
          list: [
            {
              value: 1,
              label: "15岁以下",
            },
            {
              value: 2,
              label: "16~20岁",
            },
            {
              value: 3,
              label: "21~25岁",
            },
            {
              value: 4,
              label: "26~30岁",
            },
            {
              value: 5,
              label: "31~40岁",
            },
            {
              value: 6,
              label: "40岁以上",
            },
          ],
          rules: {
            name: "age",
            value: 1, // 字段值  list.value 填入回显 0 1
            verify: false,
            errMess: "请选择年龄段",
          },
        },
        {
          id: "kjj32nsasasd",
          placeholder: "未选择获客时间",
          label: "获客时间",
          type: "time",
          show: false,
          params: {
            year: true,
            month: true,
            day: true,
            hour: false,
            minute: false,
            second: false,
            // 选择时间的时间戳
            // timestamp: true,
          },
          rules: {
            name: "createTime",
            value: "",
            verify: false,
            errMess: "未选择获客时间",
          },
        },
        {
          id: "kjjnsasd",
          placeholder: "输入名字",
          label: "姓名",
          type: "text",
          disabled: false,
          rules: {
            name: "name",
            value: "",
            verify: true,
            errMess: "姓名未填写",
            regexp: "^赵", //正则校验
          },
        },
        {
          id: "kjjnsasd",
          placeholder: "输入验证码",
          label: "验证码",
          type: "code",
          disabled: true, //是否禁用
          rules: {
            name: "code",
            value: "",
            verify: true,
            errMess: "验证码未填写",
          },
          // 发送验证码回调   由于小程序props传递函数会丢失（此处无效） 此回调方法在组建内部书写  方法在目录active-form/mixins.js中自定义书写
          // sendCodeCallback() {
          //
          // }
        },
        {
          id: "uisdfjks",
          placeholder: "请输入手机号",
          label: "手机",
          type: "mobile",
          rules: {
            name: "mobile",
            value: "", //字段值
            verify: true,
            errMess: "手机号格式不正确",
          },
          oneKeyPhone: false, //是否开启微信点击获取手机号
          //微信获取手机号回调  和参数oneKeyPhone配套  由于小程序props传递函数会丢失（此处无效） 方法在目录active-form/mixins.js中自定义书写
          // getphonenumber({details}) {
          //
          // }
        },
        {
          id: "ukhjgasdsas",
          placeholder: "选择",
          label: "性别",
          type: "select",
          show: false, //是否显示
          title: "请选择性别",
          list: [
            {
              value: 1,
              name: "男",
            },
            {
              value: 2,
              name: "女",
            },
          ],
          rules: {
            name: "sex",
            value: "", //list.value  0 1
            label: "", // list.name  填入回显 '男'
            verify: false,
            errMess: "性别未选择",
          },
        },
        {
          id: "gdfjZjnx",
          placeholder: "请输入地址信息",
          label: "地址 ",
          type: "text",
          rules: {
            name: "location",
            value: "",
            verify: false,
            errMess: "地址不能为空",
          },
        },
        {
          id: "asdfdfgd",
          label: "孩子头像 ",
          type: "file",
          accept: "image", //接受的文件类型，file只支持H5（只有微信小程序才支持把accept配置为all、media）  可选 all | media | image | file | video
          capture: ["album", "camera"], // 图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头 String | Array
          maxCount: 2, //最大选择图片的数量
          sizeType: ["original", "compressed"], //original 原图，compressed 压缩图，默认二者都有，H5无效
          compressed: true, //当accept为video时生效，是否压缩视频，默认为true  Boolean  true    false
          camera: "back", //当accept为video时生效，可选值为back或front     String  back    -
          multiple: false, //是否开启图片多选，部分安卓机型不支持  false  true
          maxSize: Number.MAX_VALUE, // 选择单个文件的最大大小，单位B(byte)，默认不限制 String | Number
          previewImage: true, //是否在上传完成后展示预览图   Boolean true    false
          disabled: false, //是否禁用
          rules: {
            name: "photo",
            fileList: [], //显示已上传的文件列表  回显   [{url:'https://xxx.cn'}]
            verify: true,
            errMess: "请选择头像",
          },
        },
        {
          id: "oodsndf",
          placeholder: "请选择兴趣",
          label: "兴趣",
          type: "checkbox",
          list: [
            {
              value: 1,
              name: "篮球",
              disabled: true, //是否禁用
              checked: false,
            },
            {
              value: 2,
              name: "足球",
              checked: false,
            },
            {
              value: 3,
              name: "羽毛球",
              checked: false,
            },
            {
              value: 4,
              name: "唱歌",
              checked: false,
            },
            {
              value: 5,
              name: "街舞",
              checked: false,
            },
            {
              value: 6,
              name: "yyds",
              checked: false,
            },
            {
              value: 7,
              name: "跳舞",
              checked: false,
            },
            {
              value: 8,
              name: "看剧",
              checked: false,
            },
            {
              value: 9,
              name: "洗澡",
              checked: false,
            },
          ],
          rules: {
            name: "interest",
            value: [8], //字段值 0 1
            verify: false,
            errMess: "请选择年龄段",
          },
        },
        {
          id: "koptymk",
          placeholder: "请输入公司名称",
          label: "公司",
          type: "text",
          rules: {
            name: "company",
            value: "",
            verify: false,
            errMess: "公司名称不能为空",
          },
        },
        {
          id: "asdfgf",
          placeholder: "(例如：平面设计、品牌设计、UI设计)",
          label: "是否有设计相关经历？",
          type: "textarea",
          rules: {
            name: "experience",
            value: "", //字段值
            verify: true,
            errMess: "请输入经历",
          },
        },
      ],
    };
  },
  methods: {
    // 提交表单
    sub() {
      this.$refs.activeForm
        .$vervify()
        .then(async (form) => {
          console.log("表单对象:", form);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="less">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .subform {
    margin: 30rpx;
    padding: 20rpx 60rpx;
    border-radius: 18rpx;
    background-color: bisque;
  }
}
</style>

组件参数

1.组件props

参数名 类型 介绍
formDate Array v-model双向绑定
num Boolean 默认false 每个表单项前面是否带有序号

2.form 项参数说明

参数名 类型 是否必填 介绍
id String number 是 必填索引 不唯一
placeholder String 是 提示
label String 是 开头标题
type String 是 该表单项类型 当前支持 text(文本)、textarea、 number、 mobile、code(验证码)、 radio、 checkbox、 file(照片,文件)、 select(上拉选择) 、time(时间选择)
params Object 是 type为 time时有效 、返回时间格式
list Array 是 type为 radio、 checkbox、select时有效
list[index].disabled Boolean 否 type为 radio、 checkbox、select时有效
disabled Boolean 否 是否禁用输入 type为 text、 number、mobile 、code 、file、textarea时有效
rules.errMess String 否 校验不通过时的错误提示
rules.name String 是 接收字段名 后端接收的字段
rules.value String Array 否 字段值 填入回显
rules.label String Array 否 type为select时填入lable回显（value也要填）
rules.verify Boolean 否 是否校验该字段
rules.regexp String 否 正侧校验字段
rules.fileList Array 是 type为file时的 文件类型参数

3.校验方法

事件名 返回参数 简介
$vervify(this.formData) null 表单校验 成功会继续往下走 失败抛出异常
$submitForm(this.formData); 表单字段对象 校验成功 获取表单值 
methods: {
    // 提交表单
    sub() {
        this.$refs.activeForm
            .$vervify()
            .then(async (form) => {
                console.log("表单对象:", form);
            })
            .catch((err) => {
                console.log("err", err);
            });
    },
},

4.由于小程序props传递函数会丢失（此处无效） 选项回调方法在目录active-form/mixins.js中自定义书写

export default {
    data() {
        return {}
    },
    methods: {
        // 微信小程序获取手机号
        async getphonenumber({detail}) {

        },
        // 获取验证码回调 此处调用api接口 并赋值
        async sendCodeCallback(item) {
            // item.rules.value =
        }
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...