1. uni-app x 没有 form 组件，但这并不影响数据收集与提交；
2. 通过 v-model 双向绑定时需要独立定义一个变量（ 不能是一个对象的属性 ）；
3. 提交数据时使用一个对象收集数据，并将数据转换为正确的格式；
4. 元素的 value 属性包含 v-model 绑定的值必须为字符串类型；
5. 本页面意在展示表单元素的基础用法，希望对您的学习有所帮助，全部表单元素用法请查阅 uni-app x 官方手册 ：
https://uniapp.dcloud.net.cn/uni-app-x/component/input.html
1. 表单数据默认为 string 类型，双向绑定时需要默认数据类型为 string；
2. 在收集表单数据后使用数据类型转换函数将数据转换为正确的类型然后进行验证和提交；
uxui 对表单元素做了基础样式修饰，相关样式 :
.ux-form-item 横向布局
.ux-form-label 元素标签
.ux-form-icon 图标样式
.ux-form-body 横向布局主体
.ux-form-input 输入框
.ux-check-item 选择性元素 横向
.ux-check-item-y 选择性元素 竖向
.ux-textarea 多行文本框
<template>
<scroll-view class="ux-body ux-page-color ux-flex1">
<text class="ux-h6 ux-color-grey ux-mt">文本输入</text>
<view class="ux-mt demo ux-bg-white">
<input
type="text"
class="ux-form-input"
v-model="name" />
</view>
<text class="ux-h6 ux-color-grey ux-mt">数值输入</text>
<view class="ux-mt ux-bg-white demo">
<input
type="number"
class="ux-form-input"
v-model="age" />
</view>
<text class="ux-h6 ux-color-grey ux-mt-large">复选框</text>
<view class="ux-mt ux-bg-white"
style="padding:10rpx;">
<checkbox-group
class="ux-flex ux-row ux-wrap"
@change="checkboxChange">
<checkbox
v-for="(item, index) in items"
:key="index"
:value="item.value + ''"
class="ux-check-item">
<text class="ux-text-small">{{item.label}}</text>
</checkbox>
</checkbox-group>
</view>
<text class="ux-h6 ux-color-grey ux-mt-large">单选框</text>
<view class="ux-mt ux-bg-white"
style="padding:12rpx 20rpx;">
<radio-group
class="ux-flex ux-row ux-wrap"
@change="radioChange">
<radio
v-for="(item, index) in items"
:key="index"
:value="item.value+''"
class="ux-mr">
<text class="ux-text-small">{{item.label}}</text>
</radio>
</radio-group>
</view>
<text class="ux-h6 ux-color-grey ux-mt-large ux-pb-small">多段文本</text>
<view class="ux-bg-white ux-border">
<textarea
v-model="desc"
class="ux-textarea"
style="width:100%;"></textarea>
</view>
<!-- 按钮 -->
<view class="ux-row ux-space-between ux-mt">
<view class=""></view>
<button
type="primary"
class="ux-button ux-noborder"
@tap="submit">
<text class="ux-button-text ux-color-white">提交</text>
</button>
</view>
</scroll-view>
</template>
<script lang="ts">
type ItemType = {
value : Number
label : string
checked : boolean
}
export default {
data() {
return {
// 选项
items : [
{
value: 1,
label: 'GO',
checked: true,
},
{
value: 2,
label: 'JAVA',
checked: false,
},
{
value: 3,
label: 'PHP',
checked: false,
},
] as ItemType[],
name : "",
age:"",
desc : "",
checkBoxValue : "",
radioValue : 0,
}
},
methods: {
submit : function(){
let formData = {
"name":this.name,
// 注意此处的数值转换
"age":parseInt(this.age),
"checkBoxValue":this.checkBoxValue,
"radioValue":this.radioValue,
"desc":this.desc
} as UTSJSONObject;
// 观察一下数据类型
console.log(typeof(formData.getNumber("age")));
console.log(formData.getNumber("age"));
},
checkboxChange : function(e:CheckboxGroupChangeEvent){
console.log(e.detail.value);
this.checkBoxValue = e.detail.value.join(",");
},
radioChange : function(e:RadioGroupChangeEvent){
console.log(e.detail.value);
this.radioValue = parseInt(e.detail.value)
}
}
}
</script>
<style scoped>
.demo{padding:0 26rpx;}
</style>
