更新记录
1.0.2(2024-09-17) 下载此版本
增加了图片上传
1.0.1(2024-09-17) 下载此版本
修正部分bug
1.0.0(2024-09-17) 下载此版本
第一次提交
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
piao-form
完整示例
<template>
<view>
<piao-form :formData="formData" @submit="sub"></piao-form>
</view>
</template>
<script>
export default {
data() {
return {
images: [],
formData: {
title: {
type: 'textarea', //必填
rules: [
//非必填
{
required: true,
errorMessage: '请填写姓名'
},
{
minLength: 3,
maxLength: 10,
errorMessage: '长度在3到5个字符'
}
],
placeholder: '请输入姓名', //非必填
label: '这是标题', //非必填
value: 'sadfs' //必填
},
age: {
type: 'number',
rules: [
{
minLength: 3,
maxLength: 10,
errorMessage: '长度在3到5个字符'
}
],
placeholder: '请输入姓名',
label: '年龄',
value: '232'
},
name: {
type: 'text',
rules: [
{
required: false,
errorMessage: '请填写年龄'
}
],
placeholder: '请输入姓名',
label: '年龄',
value: '121'
},
alert: {
type: 'datetime',
label: '提醒日期',
value: null,
rules: [
{
required: true,
errorMessage: '请选择提醒日期'
}
]
},
status: {
type: 'select',
rules: [], //提供空的数据
placeholder: '请选择状态',
label: '选择状态',
value: '',
range: [
{ value: 0, text: '篮球' },
{ value: 1, text: '足球' },
{ value: 2, text: '游泳' }
]
},
sex: {
type: 'checkbox',
label: '选择状态',
value: 0, //当multiple为true时,value的值为数组类型
range: [
{ value: 0, text: '男' },
{ value: 1, text: '女' },
{ value: 2, text: '不确定' }
],
multiple: false
},
hobby: {
type: 'checkbox',
label: '爱好',
value: [], //当multiple为true时,value的值为数组类型
range: [
{ value: 0, text: '吃饭' },
{ value: 1, text: '睡觉' },
{ value: 2, text: '打游戏' }
],
multiple: true
},
province: {
type: 'combox',
label: '省份',
value: '',
range: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口']
},
grade: {
type: 'picker',
label: '年级',
rules: [],
value: '',
range: [
{
text: '一年级',
value: '1-0',
children: [
{
text: '1.1班',
value: '1-1'
},
{
text: '1.2班',
value: '1-2'
}
]
},
{
text: '二年级',
value: '2-0'
},
{
text: '三年级',
value: '3-0'
}
],
placeholder: '请选择年级'
},
avatar: {
type: 'file',
label: '图片',
value: []
}
}
};
},
methods: {
sub(e) {
console.log(e);
}
}
};
</script>
<style></style>
返回值
{
"value": {
"title": "sadfs",
"age": "232",
"name": "121",
"alert": 1727382888000,
"status": "",
"sex": 0,
"hobby": [],
"province": "",
"grade": "",
"avatar": [
"https://mp-a55cff5c-.....com/cloudstorage/4ce25b1b-9cce-4177-8fe5-1e1bfe58bcf2.jpg",
"https://mp-a55cff5c-.....com/cloudstorage/ba1b6b21-bb8f-41bc-a3dc-9a8e088e56b2.jpg",
"https://mp-a55cff5c-.....com/cloudstorage/8ea08f27-c2e6-4944-8d3a-7067bd86f97a.jpg"
]
},
"message": "success"
}