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