教你用element-ui实现属于自己的表单组件

ゝ一纸荒年。 2023-07-04 08:59 9阅读 0赞

## 前言 ##

最近因为新型冠状病毒，我们都只能呆在家不能出门，所以挺无聊的，就写下了这篇用element-ui实现一个属于自己的组件，希望能对大家有帮助！

## 创建项目 ##

> 检查node环境配置

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

node -v

> Vue版本

可以使用下列任一命令安装这个新的包

npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

> 查看vue版本

vue --version

--------------------

> 创建项目

vue create hello-world

--------------------

注意：由于我们是开发一个第三方依赖库，我们选择 Manually select features

> 选择特性安装到到项目中

(*) Babel
     ( ) TypeScript
     ( ) Progressive Web App (PWA) Support
     ( ) Router
     ( ) Vuex
     (*) CSS Pre-processors
     (*) Linter / Formatter
     ( ) Unit Testing
     ( ) E2E Testing

> 安装哪一种 CSS 预处理语言

(*) Sass/SCSS (with dart-sass)
    ( ) Sass/SCSS (with node-sass)
    ( ) Less
    ( ) Stylus

> 选择代码风格

(*) ESLint with error prevention only
    ( ) ESLint + Airbnb config
    ( ) ESLint + Standard config
    ( ) ESLint + Prettier

> 哪种方式检测代码格式

(*) Lint on save
    ( ) Lint and fix on commit

> 是否保存预配置

Save this as a preset for future projects? (y/N)N

最后系统帮我们生成一个完整的项目。

## element集成 ##

在项目里使用

vue add element

## 首先 ##

> 需要在element.js里面导入Form、FormItem和Input

element.js最后的代码：

import Vue from 'vue'
    import { Button,Form,FormItem,Input } from 'element-ui'
    
    Vue.use(Button)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Input)

## 组件使用 ##

> 创建一个登录表单并可以验证用户输入

*  App.vue

<div>
            <h3>Element表单</h3>
            <hr>
            <el-form :model="model" :rules="rules" ref="loginForm">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="model.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="password">
                <el-input type="password" v-model="model.password" autocomplate="off">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
          
     data(){
        return{
          value:'',
          model: {username: "ming",password: ""},
          rules: {
            username: [
              {required: true, message: "请输入用户名"},
              {min:6,max:10, message: "请输入6~10的用户名"},
            ],
            password: [
              {required: true, message: "请输入密码"}
            ],
          }
        };
      },
      
       methods: {
        submitForm(form) {
          this.$refs[form].validate(valid=>{
            if(valid){
              alert('请求登录！')
            }else{
              alert('效验失败！')
            }
          })
        }
      }

**运行效果：**  
![cmd-markdown-logo][]  
![cmd-markdown-logo][cmd-markdown-logo 1]  
![cmd-markdown-logo][cmd-markdown-logo 2]

## 组件设计 ##

> 实现Input、Form、FormItem

### 实现Input ###

*  App.vue

通过v-model进行双向数据绑定，这里的v-model绑定了value值监听了input事件

<K-input v-model="value"></K-input>
    
    import KInput from './components/input'
    
    export default {
        name: 'app',
        components: {
            KInput
      },
    }

*  components/input.vue

<template>
        <div>
            <input :type="type" :value="value" @input="onInput">
        </div>
    </template>
    
    <script>
        export default{
            props:{
                value:{
                    type:String,
                    default: ''
                },
                type:{
                    type:String,
                    default: 'text'
                }
            },
            methods:{
                onInput(e) {
                    let value = e.target.value;
                    //input事件触发设置模型的值并通知父组件
                    this.$emit('input',value)
                }
            },
        }
    </script>

**运行效果**  
![cmd-markdown-logo][cmd-markdown-logo 3]

### 实现FormItem ###

*  App.vue

<K-form-Item label="用户名" prop="username">
      <K-input v-model="model.username"></K-input>
    </K-form-Item>
        
    <K-form-Item label="密码" prop="password">
      <K-input v-model="model.password" type=""></K-input>
    </K-form-Item>
    
    import KInput from './components/input'
    import KFormItem from './components/FormItem'
    
    export default {
      name: 'app',
      components: {
        KInput,
        KFormItem
      },

*  components/FormItem.vue

<template>
        <div>
            <label for="">{
       {label}}</label>
            <div>
                <slot></slot>
                <p v-if="errStatus">{
       {errMessage}}</p>
            </div>
        </div>
    </template>
    <script>
        import Schema from 'async-validator'
        export default{
            inject: ['KForm'],
            props:['label','prop'],
            data(){
                return{
                    errMessage: '',
                    errStatus: false
                }
            },
            mounted(){
                this.$on('validate',this.validator)
            },
            methods:{
                validator(){
                    //有两个Input，一个用户名，一个密码
                    const rules = this.KForm.rules[this.prop];
                    const value = this.KForm.model[this.prop];
    
                    const descriptor = {[this.prop]:rules};
                    const schema = new Schema({descriptor});
                    schema.validate({[this.prop]:value},errors =>{
                        if(errors){
                            this.errMessage = errors[0].message;
                            this.errStatus = true;
                        }else{
                            this.errMessage = '';
                            this.errStatus = '';
                        }
                    })
                }
            }
        }
    </script>

**运行结果**  
![cmd-markdown-logo][cmd-markdown-logo 4]  
![cmd-markdown-logo][cmd-markdown-logo 5]

### 实现Form ###

*  App.vue

<K-form :model="model" :rules="rules">
    
    <K-form-Item label="用户名" prop="username">
      <K-input v-model="model.username"></K-input>
    </K-form-Item>
    
    <K-form-Item label="密码" prop="password">
      <K-input v-model="model.password" type=""></K-input>
    </K-form-Item>
    </K-form>
    
    import KInput from './components/input'
    import KFormItem from './components/FormItem'
    import KForm from './components/Form'
    export default {
      name: 'app',
      components: {
        KInput,
        KFormItem,
        KForm
      },

*  components/Form.vue

<template>
        <div>
            <form>
                <slot>
    
                </slot>
            </form>
        </div>
    </template>
    <script>
        export default{
            provide(){
                return {
                    KForm: this
                }
            },
            props:{
                model:{
                    type: Object,
                    required: true
                },
                rules:{
                    type: Object
                }
            }
        }
    </script>

**运行效果**  
![cmd-markdown-logo][cmd-markdown-logo 6]

## 代码地址 ##

https://github.com/shifengming/element-form

## 最后 ##

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！  
![cmd-markdown-logo][cmd-markdown-logo 7]  
![cmd-markdown-logo][cmd-markdown-logo 8]

[cmd-markdown-logo]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzI4LzE2ZmVjMjY5N2Y5YTM3OGM?x-oss-process=image/format,png
[cmd-markdown-logo 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzI4LzE2ZmVjMjc3Y2ZlYjI1ZWI?x-oss-process=image/format,png
[cmd-markdown-logo 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzI4LzE2ZmVjMjdjZmQ5ZGQ0OTI?x-oss-process=image/format,png
[cmd-markdown-logo 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzI4LzE2ZmVjNDIzMTE0OTdjYWI?x-oss-process=image/format,png
[cmd-markdown-logo 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzI4LzE2ZmVjNTE4YzYwYTFkNjc?x-oss-process=image/format,png
[cmd-markdown-logo 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzI4LzE2ZmVjNTQ4MGJjN2YzYjY?x-oss-process=image/format,png
[cmd-markdown-logo 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzI4LzE2ZmVjNWM4ZGM1OWFjZmU?x-oss-process=image/format,png
[cmd-markdown-logo 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGUzNmNhZjkzZmI?x-oss-process=image/format,png
[cmd-markdown-logo 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGU4YjExZDBjZTY?x-oss-process=image/format,png