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

╰半夏微凉° 2024-03-16 21:41 161阅读 0赞

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