从零开发一个宝宝账单（五）：uni-ui表单页面

前端

2023-09-19 16:22:21

今天我们来实现记一笔功能，首页是数据展示，没有数据如何展示，所以先实现添加数据的功能。这是我们最初的页面，如你所见，空空如也，现在我们往里面加入几个选择框与输入框。

认识uni-ui

uni-app框架中，提供了丰富的组件库，其中就有表单组件库uni-ui。uni-ui是一个基于Vue.js的UI框架，提供了丰富的表单组件，可以快速构建表单页面。

uni-ui表单组件

uni-ui表单组件包含了各种常见的表单元素，如输入框、选择框、开关、日期选择器等。这些组件都提供了丰富的属性和事件，可以满足各种表单需求。

创建表单页面

在pages目录下，新建一个form.vue页面，作为表单页面。在form.vue页面中，引入uni-ui组件库，并使用uni-ui表单组件构建表单页面。

<template>
  <view>
    <uni-form @submit="onSubmit">
      <uni-form-item label="类型" required>
        <uni-radio-group v-model="type">
          <uni-radio label="收入" value="income" />
          <uni-radio label="支出" value="expense" />
        </uni-radio-group>
      </uni-form-item>
      <uni-form-item label="金额" required>
        <uni-input v-model="amount" type="number" />
      </uni-form-item>
      <uni-form-item label="日期" required>
        <uni-datetime-picker v-model="date" type="date" />
      </uni-form-item>
      <uni-form-item label="备注">
        <uni-textarea v-model="remark" />
      </uni-form-item>
      <uni-button type="primary" size="large" @click="onSubmit">记一笔</uni-button>
    </uni-form>
  </view>
</template>

<script>
import { useStore } from '@/store'

export default {
  setup() {
    const store = useStore()

    const type = ref('income')
    const amount = ref(0)
    const date = ref(new Date().toISOString().slice(0, 10))
    const remark = ref('')

    const onSubmit = () => {
      store.commit('addRecord', {
        type: type.value,
        amount: amount.value,
        date: date.value,
        remark: remark.value
      })
      uni.navigateBack()
    }

    return {
      type,
      amount,
      date,
      remark,
      onSubmit
    }
  }
}
</script>