uni-app之表单组件教程玩转交互式表单

在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开发中取得成功！