如何在Vue3中使用第三方组件库ElementPlus创建表单？_element-plus ts vue3 自定义表单

随着前端技术的不断发展，Vue.js 已成为现代前端开发中备受欢迎的框架之一。近年来，Vue 3 的发布带来了许多新特性和优化。在实际开发过程中，我们经常需要借助第三方组件库来加快开发速度、提高代码质量和项目的一致性。在这篇博客文章中，我将带你一步一步了解如何在 Vue 3 中使用 Element Plus 组件库创建表单。

什么是 Element Plus？

Element Plus 是基于 Vue 3 的一套完整的 UI 组件库，其设计简洁、功能丰富，能帮助开发者快速构建高质量的 web 界面。在 Element Plus 中，内置了大量的 UI 组件，如按钮、输入框、表单、对话框等，可以极大地提升我们的开发效率。

1. 准备工作

在开始之前，确保你已经在本地安装了 Node.js 和 npm 或 yarn。我们先创建一个 Vue 3 项目并引入 Element Plus 组件库。

1.1 创建 Vue 3 项目

# 使用 Vue CLI 创建项目
npm install -g @vue/cli
vue create my-vue3-project
1
2
3

选择 default 模板或根据你的需要选择 Manually select features，创建完成后，进入项目目录：

cd my-vue3-project
1

1.2 安装 Element Plus

# 使用 npm 安装 Element Plus
npm install element-plus --save

# 使用 yarn 安装 Element Plus
yarn add element-plus
1
2
3
4
5

1.3 引入 Element Plus

在 src/main.js 文件中引入 Element Plus：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
1
2
3
4
5
6
7
8

2. 创建表单组件

接下来，我们使用 Element Plus 的组件创建一个简单的用户注册表单。新建一个名为 RegisterForm.vue 的组件文件，并编写如下代码：

<template>
  <el-form :model="form" :rules="rules" ref="registerForm" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input type="password" v-model="form.confirmPassword" placeholder="请确认密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'RegisterForm',
  setup() {
    const form = ref({
      username: '',
      password: '',
      confirmPassword: '',
    });

    const rules = ref({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不得小于 6 位', trigger: 'blur' },
      ],
      confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== form.value.password) {
              callback(new Error('两次输入密码不一致'));
            } else {
              callback();
            }
          },
          trigger: 'blur',
        },
      ],
    });

    const onSubmit = () => {
      const registerForm = ref('registerForm');
      registerForm.value.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          alert('表单验证失败');
          return false;
        }
      });
    };

    const onReset = () => {
      form.value = {
        username: '',
        password: '',
        confirmPassword: '',
      };
    };

    return {
      form,
      rules,
      onSubmit,
      onReset,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

3. 集成表单组件

在 App.vue 中引入并使用 RegisterForm 组件：

<template>
  <div id="app">
    <h1>注册表单</h1>
    <RegisterForm></RegisterForm>
  </div>
</template>

<script>
import RegisterForm from './components/RegisterForm.vue';
export default {
  name: 'App',
  components: {
    RegisterForm,
  },
};
</script>

<style>
/* 可选样式 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4. 运行项目

最后，运行项目查看效果：

npm run serve
1

打开浏览器访问 http://localhost:8080，你将看到一个简洁的用户注册表单。表单包含用户名、密码和确认密码输入框，并且内置了基本的验证规则，如必须输入、密码长度限制以及两次输入密码一致性的验证。

小结

通过本文的学习，我们已经了解了如何在 Vue 3 项目中使用 Element Plus 组件库创建一个简单的表单。在实际开发过程中，我们还可以根据项目需求，定制更加复杂和丰富的表单组件，比如添加日期选择、级联选择等。

Element Plus 提供了丰富的组件和灵活的配置选项，可以帮助我们更高效、快捷地构建优质的前端应用。希望本文对你的学习和开发有所帮助。如果你有任何问题或建议，欢迎留言讨论！

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作