在UniApp中，表单组件是构建用户交互的重要元素。本教程将详细介绍UniApp中的各种表单子组件，包括(button、checkbox、editor、form、input、label、picker、picker-view、radio、slider、switch和textarea)，并提供详细的示例代码。
1. button 按钮
按钮是常用的表单子组件之一，用于触发某些操作或提交表单。
示例代码：
<template>
<view>
<button @click="handleClick">点击我</button>
</view>
</template>
<script>
export default {
methods: {
handleClick() {
uni.showToast({
title: '按钮被点击',
icon: 'none'
});
}
}
}
</script>
2. checkbox 复选框
复选框允许用户从一组选项中选择多个选项。
示例代码：
<template>
<view>
<checkbox-group v-model="selectedFruits">
<checkbox value="apple">苹果</checkbox>
<checkbox value="banana">香蕉</checkbox>
<checkbox value="orange">橙子</checkbox>
</checkbox-group>
</view>
</template>
<script>
export default {
data() {
return {
selectedFruits: []
};
}
}
</script>
3. editor 富文本编辑器
富文本编辑器允许用户输入格式丰富的文本内容。
示例代码：
<template>
<view>
<editor v-model="content" placeholder="请输入内容"></editor>
</view>
</template>
<script>
export default {
data() {
return {
content: ''
};
}
}
</script>
4. form 表单
表单是一种包含各种表单子组件的容器，用于收集用户输入的数据。
示例代码：
<template>
<view>
<form @submit="handleSubmit">
<input type="text" v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button type="submit">提交</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
handleSubmit(event) {
event.preventDefault();
// 处理表单提交逻辑
}
}
}
</script>
5. input 输入框
输入框允许用户输入文本或其他类型的数据。
示例代码：
<template>
<view>
<input type="text" v-model="message" placeholder="请输入消息" />
</view>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
}
</script>
6. label 标签
标签用于为相关的表单元素提供标识或描述。
示例代码：
<template>
<view>
<label for="username">用户名：</label>
<input id="username" type="text" v-model="username" />
</view>
</template>
<script>
export default {
data() {
return {
username: ''
};
}
}
</script>
7. picker 选择器
选择器用于从预定义的选项中选择一个或多个值。
示例代码：
<template>
<view>
<picker :value="selectedCity" @change="handleChange">
<view class="picker">
{
{ selectedCity }}
</view>
<picker-view-column>
<view v-for="city in cities" :key="city">{
{ city }}</view>
</picker-view-column>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
cities: ['北京', '上海', '广州', '深圳'],
selectedCity: ''
};
},
methods: {
handleChange(event) {
this.selectedCity = this.cities[event.detail.value];
}
}
}
</script>
8. picker-view 滚动选择器
滚动选择器用于从预定义的选项中滚动选择一个或多个值。
示例代码：
<template>
<view>
<picker-view :value="selectedTime" @change="handleChange">
<picker-view-column>
<view v-for="hour in hours" :key="hour">{
{ hour }}</view>
</picker-view-column>
<picker-view-column>
<view v-for="minute in minutes" :key="minute">{
{ minute }}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
hours: ['00', '01', '02', '03', ...],
minutes: ['00', '15', '30', '45'],
selectedTime: [0, 0] // 默认选中第一个小时和第一个分钟
};
},
methods: {
handleChange(event) {
const [hourIndex, minuteIndex] = event.detail.value;
this.selectedTime = [this.hours[hourIndex], this.minutes[minuteIndex]];
}
}
}
</script>
9. radio 单选框
单选框允许用户从一组选项中选择一个选项。
示例代码：
<template>
<view>
<radio-group v-model="selectedGender">
<radio value="male">男</radio>
<radio value="female">女</radio>
</radio-group>
</view>
</template>
<script>
export default {
data() {
return {
selectedGender: ''
};
}
}
</script>
10. slider 滑动选择器
滑动选择器允许用户通过滑动选择一个范围内的值。
示例代码：
<template>
<view>
<slider v-model="selectedValue" min="0" max="100"></slider>
<text>{
{ selectedValue }}</text>
</view>
</template>
<script>
export default {
data() {
return {
selectedValue: 0
};
}
}
</script>
11. switch 开关
开关用于切换一个选项的状态，可以表示开或关。
示例代码：
<template>
<view>
<switch v-model="isToggle"></switch>
<text>{
{ isToggle ? '开启' : '关闭' }}</text>
</view>
</template>
<script>
export default {
data() {
return {
isToggle: false
};
}
}
</script>
12. textarea 多行文本框
多行文本框允许用户输入多行文本内容。
示例代码：
<template>
<view>
<textarea v-model="content" placeholder="请输入内容"></textarea>
</view>
</template>
<script>
export default {
data() {
return {
content: ''
};
}
}
</script>
恭喜！你已经学习了UniApp中的各种表单子组件，包括(button、checkbox、editor、form、input、label、picker、picker-view、radio、slider、switch和textarea)。通过这些组件，你可以构建交互式的表单和收集用户输入的数据。尝试运行示例代码，并根据自己的需求进行定制和扩展。祝你在UniApp开发中取得成功！