uni-app 中使用 uView 封装通用表单组件

2023-10-18 04:10:50

<style>
.com-form{
    font-size: 28rpx;
}

.com-form .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #efefef;
}

.com-form .item .label{
    width: 140rpx;
}

.com-form .item .input{
    flex: 1;
    margin-left: 20rpx;
}

.com-form .item .tip{
    color: #999;
    font-size: 24rpx;
}

.com-form .button-group{
    display: flex;
    justify-content: flex-end;
    padding-top: 20rpx;
}

.com-form .button-group .button{
    margin-left: 20rpx;
}
</style>

<template>
    <view class="com-form">
        <view class="item" v-for="(item, index) in items" :key="item.name">
            <view class="label">{{item.label}}</view>
            <view class="input">
                <u-input :type="item.type" :placeholder="item.placeholder" @input="onInputChange(item.name, $event)"></u-input>
            </view>
            <view class="tip">{{item.tip}}</view>
        </view>
        <view class="button-group">
            <u-button size="mini" @click="onCancel">取消</u-button>
            <u-button size="mini" type="primary" @click="onSubmit">提交</u-button>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        items: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            formData: {}
        }
    },
    methods: {
        onInputChange(name, e) {
            this.formData[name] = e.detail.value
        },
        onCancel() {
            this.$emit('cancel')
        },
        onSubmit() {
            this.$emit('submit', this.formData)
        }
    }
}
</script>

前言

表单是前端开发中非常常见的一类组件，它允许用户输入各种数据，如文本、数字、日期等。在 uni-app 中，我们可以使用各种各样的表单组件来构建表单，但这些组件通常比较分散，使用起来不够方便。因此，本文将介绍如何使用 uView 封装一个通用表单组件，实现更加便捷的表单开发。

封装通用表单组件

首先，我们需要创建一个新的组件文件，并将其命名为 ComForm.vue。然后，在组件文件中添加以下代码：

<template>
    <view class="com-form">
        <view class="item" v-for="(item, index) in items" :key="item.name">
            <view class="label">{{item.label}}</view>
            <view class="input">
                <u-input :type="item.type" :placeholder="item.placeholder" @input="onInputChange(item.name, $event)"></u-input>
            </view>
            <view class="tip">{{item.tip}}</view>
        </view>
        <view class="button-group">
            <u-button size="mini" @click="onCancel">取消</u-button>
            <u-button size="mini" type="primary" @click="onSubmit">提交</u-button>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        items: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            formData: {}
        }
    },
    methods: {
        onInputChange(name, e) {
            this.formData[name] = e.detail.value
        },
        onCancel() {
            this.$emit('cancel')
        },
        onSubmit() {
            this.$emit('submit', this.formData)
        }
    }
}
</script>

<style>
.com-form{
    font-size: 28rpx;
}

.com-form .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #efefef;
}

.com-form .item .label{
    width: 140rpx;
}

.com-form .item .input{
    flex: 1;
    margin-left: 20rpx;
}

.com-form .item .tip{
    color: #999;
    font-size: 24rpx;
}

.com-form .button-group{
    display: flex;
    justify-content: flex-end;
    padding-top: 20rpx;
}

.com-form .button-group .button{
    margin-left: 20rpx;
}
</style>

在这个组件中，我们使用了 uView 的 u-input 组件作为表单输入组件。同时，我们还提供了 onCancel 和 onSubmit 两个事件，用于处理取消和提交表单。

使用通用表单组件

要使用这个通用表单组件，我们需要在需要的地方引用它。例如，在 App.vue 文件中，我们可以添加以下代码：

<template>
  <view>
    <com-form :items="items" @submit="onSubmit"></com-form>
  </view>
</template>

<script>
import ComForm from '@/components/ComForm.vue'

export default {
  components: {
    ComForm
  },
  data() {
    return {
      items: [
        {
          name: 'name',
          label: '姓名',
          type: 'text',
          placeholder: '请输入您的姓名'
        },
        {
          name: 'age',
          label: '年龄',
          type: 'number',
          placeholder: '请输入您的年龄'
        },
        {
          name: 'gender',
          label: '性别',
          type: 'radio',
          options: [
            {
              label: '男',
              value: 'male'
            },
            {
              label: '女',
              value: 'female'
            }
          ]
        }
      ]
    }
  },
  methods: {
    onSubmit(formData) {
      console.log(formData)
    }
  }
}
</script>