仿elementUI,实现一个form表单组件(带校验)

1.前期准备

使用vue-cli初始化一个项目

vue create my-app

2.文件结构

新建KForm.vueKFormItem.vueKInput.vue文件

image.png

3.组件划分

image.png

4.组件间的联系

未命名文件 (1).png

4.用户使用方式

我们就仿照elementUI Form表单的使用方式,来构建我们的组件


image.png

5.编写代码

k-input

<template>
  <div>
    <input type="text" :value="value" @blur="onInput" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    onInput(e) {
      this.$emit("input", e.target.value);
      // 值发生变化的时候,父组件派发事件,父组件监听事件
      this.$parent.$emit("validate");
    },
  },
};
</script>

重点:
1.组件使用了v-mode实现自定义绑定。
2.这个组件唯一的重点就是this.$parent.$emit("validate"),这句代码的意思就是,input事件触发的时候,通知父组件进行校验,这个跟我们平时所用到的事件总线的机制一样,只不过事件总线是新的Vue实例

k-form-item

<template>
  <div>
    <div class="formItem">
      <label v-if="label">{{ label }}:</label>
      <slot></slot>
    </div>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>
<style scoped>
.formItem {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.error {
  font-size: 12px;
  color: red;
}
</style>
<script>
import Validator from "async-validator";
export default {
  inject: ["form"],
  componentName:"KFormItem",
  props: {
    label: {
      type: String,
    },
    prop: {
      type: String,
    },
  },

  data() {
    return {
      error: "",
    };
  },
  mounted() {
    this.$on("validate", () => {
      if (this.prop) {
        this.validate();
      }
    });
  },
  methods: {
    validate() {
      const rules = this.form.rules[this.prop];
      const model = this.form.model[this.prop];
      const validator = new Validator({[this.prop]: rules});
      return validator.validate({[this.prop]: model}, (errors) => {
        if (errors) {
          console.log(errors);
          this.error = errors[0].message;
        } else {
          console.log("校验成功");
          this.error = "";
        }
      });
    },
  },
};
</script>

重点:
1.prop属性的用途:我们都知道一个formItem组件对应一个input组件,按照我们的组件规划,这个组件的主要的功能就是校验,既然是校验,我们就得知道我们校验的是哪个属性,执行的是哪个属性的校验规则,所以将我们校验的那个属性,让用户直接当作props属性传进来,所以这也就是prop和v-model绑定的那个值必须是一样的原因,我们根据这个属性,就可以拿到这个属性的值和这个属性对应的规则,从而利用async-validator这个第三方库执行校验。
2.inject:["form"]的目的form-item想要校验,校验哪个属性通过prop已经知道了,接下来就是想办法拿到model和rules,我们用provide/inject的方式将form自己的实例注入进来,然后就可以直接通过inject注入的form访问到model和rules,并且还是响应式,因为我们只有一个数据源

k-form

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  provide() {
    return {
      form: this,
    };
  },
  componentName:"KForm",
  props: {
    model: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    validate(callback) {
      const validates = this.$children
        .filter((vm) => vm.prop)
        .map((vm) => vm.validate());
      console.log(validates);
      Promise.all(validates)
        .then(() => {
          callback(true);
        })
        .catch(() => {
          callback(false);
        });
    },
  },
};
</script>

重点:
1.设置model和rules这俩个props属性,就是为了在k-form-item组件中可以访问到model
2.validate方法,就是遍历$children这个属性,这个属性会把所有的自定义组件实例,组合成一个数组,遍历执行k-form-item里面的validate方法

app.vue中引用组件

<template>
  <div id="app">
    <!-- <childs /> -->
    <k-form :model="model" :rules="rules" ref="myForm">
      <k-form-item label="用户名" prop="userName">
        <k-input v-model="model.userName"></k-input>
      </k-form-item>
      <k-form-item label="密码">
        <k-input v-model="model.password"></k-input>
      </k-form-item>
      <k-form-item>
        <button @click="onSubmit">提交</button>
      </k-form-item>
    </k-form>
  </div>
</template>

<script>
// import childs from "./components/Childs/index.vue";
import KFormItem from "./components/form/KFormItem.vue";
import KInput from "./components/form/KInput.vue";
import KForm from "./components/form/KForm.vue";
import create from "./utils/create";
import Notify from "./components/Notify";
export default {
  components: {
    KFormItem,
    KInput,
    KForm,
  },

  name: "App",
  data() {
    return {
      model: {userName: "张三", password: ""},
      rules: {
        userName: [{required: true, message: "用户名不能为空"}],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.myForm.validate((res) => {
        create(Notify, {
          title: "消息",
          message: res ? "登录成功" : "校验失败",
        }).show();
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
</style>

create和Notify是我自己封装的方法和组件,不是本文章的重点,只需要关注res是true还是false

推荐阅读更多精彩内容