注意！！！
导入即用 全端支持
有问题 可评论 看到及时回复
本插件基于 uview1.0进行重构 使用需要引入uview1.0支持
[ 点击uview1.0官网地址 ](https:
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,
verify: false,
errMess: "请选择年龄段",
},
},
{
id: "kjj32nsasasd",
placeholder: "未选择获客时间",
label: "获客时间",
type: "time",
show: false,
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false,
},
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: "验证码未填写",
},
},
{
id: "uisdfjks",
placeholder: "请输入手机号",
label: "手机",
type: "mobile",
rules: {
name: "mobile",
value: "",
verify: true,
errMess: "手机号格式不正确",
},
oneKeyPhone: false,
},
{
id: "ukhjgasdsas",
placeholder: "选择",
label: "性别",
type: "select",
show: false,
title: "请选择性别",
list: [
{
value: 1,
name: "男",
},
{
value: 2,
name: "女",
},
],
rules: {
name: "sex",
value: "",
label: "",
verify: false,
errMess: "性别未选择",
},
},
{
id: "gdfjZjnx",
placeholder: "请输入地址信息",
label: "地址 ",
type: "text",
rules: {
name: "location",
value: "",
verify: false,
errMess: "地址不能为空",
},
},
{
id: "asdfdfgd",
label: "孩子头像 ",
type: "file",
accept: "image",
capture: ["album", "camera"],
maxCount: 2,
sizeType: ["original", "compressed"],
compressed: true,
camera: "back",
multiple: false,
maxSize: Number.MAX_VALUE,
previewImage: true,
disabled: false,
rules: {
name: "photo",
fileList: [],
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],
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}) {
},
async sendCodeCallback(item) {
}
}
}
