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

前言

最近因为新型冠状病毒，我们都只能呆在家不能出门，所以挺无聊的，就写下了这篇用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('效验失败！')
        }
      })
    }
  }

运行效果：

组件设计

实现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>

运行效果

实现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>

运行结果

实现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>

运行效果

代码地址

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

最后

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

欢迎大家加入，一起学习前端，共同进步！