Vue3+ElementPlus 表单组件的封装实例

下面是关于“Vue3+ElementPlus 表单组件的封装实例”的详细攻略。

1. 实现目标

我们的目标是封装一个表单组件，使得在开发中能够快速地构建出各种表单。在这个表单组件中，我们需要支持 ElementPlus 中的 Input、Select、DatePicker、Radio 等常用表单控件，同时也可以支持自定义表单控件。

2. 技术选型

我们选择 Vue3 + ElementPlus 作为主要技术栈，这两者的配合可以让我们快速开发出复杂的表单应用。在封装表单组件时，我们将打造一个通用的、可复用的组件库。

3. 开始封装

首先，我们需要创建一个新的 Vue3 的项目，然后安装 ElementPlus：

npm install element-plus -S

然后，我们就可以开始封装我们的表单组件了。

3.1 封装一个基础表单控件

我们先从最简单的 Input 开始，这个控件没有任何样式，只是把 ElementPlus 中的 Input 封装一下罢了。

<template>
  <el-form-item :label="label">
    <el-input v-bind="$attrs" v-model="model" />
  </el-form-item>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'FormFieldInput',
  inheritAttrs: false,
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      model: this.value,
    }
  },
})
</script>

上面这段代码中，我们这样去做：

• 使用 <el-form-item> 包装一个 <el-input>，同时从父组件获取一个 label 属性。
• 通过 :value.sync 和 @update:value 将 Input 的 model 与父组件的 value 双向绑定起来，这样就能够与表单数据进行联动。

defineComponent 是 Vue3 中定义组件的方式，它可以在单文件组件中使用。这个组件名叫做 FormFieldInput，通过 props 接收了从父级组件传递下来的 label 和 value 两个属性，它借用了 ElementPlus 的 Input 控件来实现输入框的功能。

3.2 封装更多的表单控件

除了 Input 控件，我们还需要封装 Select、DatePicker 等控件。我们可以通过复用 Input 控件的代码，只需要修改 el-input 标签为对应的 ElementPlus 控件即可。

以 Select 控件为例：

<template>
  <el-form-item :label="label">
    <el-select v-bind="$attrs" v-model="model">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'FormFieldSelect',
  inheritAttrs: false,
  props: {
    value: {
      default: '',
      type: [String, Number],
    },
    label: {
      default: '',
      type: String,
    },
    options: {
      default: () => [],
      type: Array,
    },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      model: this.value,
    }
  },
})
</script>

以上代码中，我们将 el-input 标签改为了 el-select 标签，并添加了 v-for 循环渲染值域数组 options。另外，我们也为这个组件添加了 options 这个 prop，它将会是一个选项列表。

3.3 封装表单组件

最后，我们将 Input，Select，DatePicker 等多个表单控件封装到一个表单组件中。这样一来，我们就可以用这个表单组件来进行快速的表单构建了。

<template>
  <el-form :model="form" :label-position="labelPosition" :size="size" :inline="inline" ref="form">
    <slot />
  </el-form>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'OForm',

  props: {
    value: {
      default: () => {},
      type: Object,
    },
    labelPosition: {
      default: 'right',
      type: String,
    },
    size: {
      default: '',
      type: String,
    },
    inline: {
      default: false,
      type: Boolean,
    },
  },

  emits: ['update:value'],

  data: () => ({
    form: {},
  }),

  created() {
    this.form = this.value
  },

  watch: {
    form: {
      handler(val) {
        this.$emit('update:value', val)
      },
      deep: true,
    },
    value: {
      handler(val) {
        this.form = val
      },
      deep: true,
    },
  },
})
</script>

在这个表单组件中，我们只是利用了 ElementPlus 自带的表单控件，但这些控件在项目中使用是很频繁的。通过这种方式，我们就可以封装出自己的表单库，大大提高了开发效率。

4. 示例应用

现在我们已经封装了一个表单组件库，接下来我们用一个示例来展示如何在项目中使用这个表单组件。

先是安装:

npm i --save my-form

然后在组件中引入：

<template>
  <o-form v-model="form">
    <form-field-input label="姓名" v-model="form.name" />
    <form-field-input label="年龄" v-model="form.age" />
    <form-field-select label="性别" v-model="form.gender" :options="genderOptions" />
    <form-field-date-picker label="出生日期" v-model="form.birthday" />
    <form-field-radio label="是否开心" v-model="form.happy" :options="happyOptions" />
    <el-button type="primary" @click="submit">提交</el-button>
  </o-form>
</template>

<script>
import { defineComponent } from 'vue'
import OForm from 'my-form'
import FormFieldInput from 'my-form/lib/FormFieldInput'
import FormFieldSelect from 'my-form/lib/FormFieldSelect'
import FormFieldDatePicker from 'my-form/lib/FormFieldDatePicker'
import FormFieldRadio from 'my-form/lib/FormFieldRadio'

export default defineComponent({
  name: 'MyForm',
  components: {
    OForm,
    FormFieldInput,
    FormFieldSelect,
    FormFieldDatePicker,
    FormFieldRadio,
  },
  data() {
    return {
      form: {
        name: '',
        age: 0,
        gender: '',
        birthday: '',
        happy: false,
      },
      genderOptions: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
      ],
      happyOptions: [
        { label: '是', value: true },
        { label: '否', value: false },
      ],
    }
  },
  methods: {
    submit() {
      console.log(this.form)
    },
  },
})
</script>

在这个示例中，我们将我们自己封装的表单组件库引入到项目中，并使用其中的 Input、Select、DatePicker、Radio 表单控件。

通过这里的示例，我们可以看到，通过这个表单组件库，我们可以快速地构建出一个表单，并且有很强的可定制性。

5. 总结

在本篇文章中，我们详细地讲解了如何通过 Vue3 + ElementPlus 来封装一个通用的表单组件库，在其中我们讲解了如何自定义各种常用表单控件以及如何将这些控件封装到一个表单组件库中。

这个组件库可以极大地提高我们在表单开发中的效率，还可以通过增加一些自定义的表单控件来适应更多的业务需求。开发者可以根据实际情况来灵活地扩展功能。