实现表单组件

需求分析

  • 实现KForm
    • 指定数据model、校验规则rules
    • 校验validate()
  • KformItem
    • label标签添加:label
    • prop属性名称
    • 执行校验validate()
    • 显示错误信息
  • KInput
    • 维护数据v-model
    • 图标、反馈

KInput

v-model语法糖

  1. <input v-model="test" />
  2. <input v-bind:value="test" @input="test= $event.target.value" />

v-bind=”$attrs”: 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。
在子组件中应当添加inheritAttrs: false( 避免父作用域的不被认作props的特性绑定应用在子组件的根元素上 )。

  1. <template>
  2.   <div>
  3.     <!-- 自定义组件双向绑定：:value  @input -->
  4.     <!-- v-bind="$attrs"展开$attrs -->
  5.     <input :type="type" :value="value" @input="onInput" v-bind="$attrs">
  6.   </div>
  7. </template>
  9. <script>
  10.   export default {
  11.     inheritAttrs: false, // 设置为false避免设置到根元素上
  12.     props: {
  13.       value: {
  14.         type: String,
  15.         default: ''
  16.       },
  17.       type: {
  18.         type: String,
  19.         default: 'text'
  20.       }
  21.     },
  22.     methods: {
  23.       onInput(e) {
  24.         // 派发一个input事件即可
  25.         this.$emit('input', e.target.value)
  27.         // 通知父级执行校验
  28.         this.$parent.$emit('validate')
  29.            // this.dispatch('KFormItem','validate');
  30.       }
  31.     },
  32.   }
  33. </script>

KFormItem

  1. <template>
  2.   <div>
  3.     <!-- label -->
  4.     <label v-if="label">{{label}}</label>
  6.     <!--  显示内部表单元素 -->
  7.     <slot></slot>
  9.     <!-- 校验信息显示 -->
  10.     <p v-if="error">{{error}}</p>
  11.   </div>
  12. </template>
  14. <script>
  15. // Asyc-validator
  16. import Schema from "async-validator";
  18. export default {
  19.   inject: ["form"],
  20.   data() {
  21.     return {
  22.       error: "" // error是空说明校验通过
  23.     };
  24.   },
  25.   props: {
  26.     label: {
  27.       type: String,
  28.       default: ""
  29.     },
  30.     prop: {
  31.       type: String
  32.     }
  33.   },
  34.   mounted() {
  35.     this.$on("validate", () => {
  36.       this.validate();
  37.     });
  38.     if(this.prop){
  39.         //派发事件通知KForm，新增一个KFromItem实例
  40.         this.dispatch('KForm','kkb.form.addField',[this])
  41.     }    
  42.   },
  43.   methods: {
  44.     validate() {
  45.       // 规则
  46.       const rules = this.form.rules[this.prop];
  47.       // 当前值
  48.       const value = this.form.model[this.prop];
  50.       // 校验描述对象
  51.       const desc = { [this.prop]: rules };
  52.       // 创建Schema实例
  53.       const schema = new Schema(desc);
  54.       //返回promise，全局可以统一处理
  55.       return schema.validate({ [this.prop]: value }, errors => {
  56.         if (errors) {
  57.           this.error = errors[0].message;
  58.         } else {
  59.           // 校验通过
  60.           this.error = "";
  61.         }
  62.       });
  63.     }
  64.   }
  65. };
  66. </script>

KForm

  1. <template>
  2.   <div>
  3.     <slot></slot>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   componentName:'KForm',
  10.   provide() {
  11.     return {
  12.       form: this //传递表单组件的实例
  13.     };
  14.   },
  15.   props: {
  16.     model: {
  17.       type: Object,
  18.       required: true
  19.     },
  20.     rules: {
  21.       type: Object
  22.     }
  23.   },
  24.   created(){
  25.     this.fields=[]
  26.       this.$on('kkb.form.addField'),item=>{
  27.         this.fields.push(item)
  28.     })
  29.   },
  30.   methods: {
  31.     validate(cb) {
  32.       // 获取所有孩子KFormItem
  33.       // [resultPromise]
  34.       const tasks = this.$children
  35.         .filter(item => item.prop) // 过滤掉没有prop属性的Item
  36.         .map(item => item.validate());
  37.             //const tasks = this.fields.map(item=>item.valodate())
  39.       // 统一处理所有Promise结果
  40.       Promise.all(tasks)
  41.         .then(() => cb(true))
  42.         .catch(() => cb(false));
  43.     }
  44.   }
  45. };
  46. </script>

数据校验

  • Input通知校验

    1. onInput(e) { 
    2.   // ... 
    3.   // $parent指FormItem 
    4.   this.$parent.$emit('validate');
    5. }

    FormItem监听校验通知，获取规则并执行校验

    1.   inject: ['form'], // 注入
    2. mounted() {// 监听校验事件
    3.   this.$on("validate", () => {
    4.     this.validate();
    5.   });
    6. },
    7.  methods: {
    8.       validate() { 
    9.     // 获取对应FormItem校验规则
    10.     console.log(this.form.rules[this.prop]); 
    11.     // 获取校验值 
    12.     console.log(this.form.model[this.prop]); }
    13. }

  • 安装async-validator： npm i async-validator -S

  • 表单全局验证，为Form提供validate方法


实现通知组件

  1. this.$create(
  2.   Notice, 
  3.   { 
  4.     title: '社会你杨哥喊你来搬砖', 
  5.     message: '提示信息', 
  6.     duration: 1000 
  7.   }).show();

create函数

传入一个组件配置，创建它的实例，并且将它挂载到body上

  1. import Vue from 'vue'
  3. function create(Component, props) {
  4.   // 组件构造函数如何获取？
  5.   // 1.Vue.extend()
  6.   // 2.render
  7.   const vm = new Vue({
  8.     // h是createElement, 返回VNode，是虚拟dom
  9.     // 需要挂载才能变成真实dom
  10.     render: h => h(Component, {props}),
  11.   }).$mount() // 不指定宿主元素，则会创建真实dom，但是不会追加操作
  13.   // 获取真实dom
  14.   document.body.appendChild(vm.$el)
  16.   const comp = vm.$children[0]
  18.   // 删除
  19.   comp.remove = function() {
  20.     document.body.removeChild(vm.$el)
  21.     vm.$destroy()
  22.   }
  23.   return comp
  24. }
  26. export default create

另一种创建组件实例的方式： Vue.extend(Component)

通知组件

  1. <template>
  2.   <div class="box" v-if="isShow">
  3.     <h3>{{title}}</h3>
  4.     <p class="box-content">{{message}}</p>
  5.   </div>
  6. </template>
  8. <script>
  9. export default {
  10.   props: {
  11.     title: {
  12.       type: String,
  13.       default: ""
  14.     },
  15.     message: {
  16.       type: String,
  17.       default: ""
  18.     },
  19.     duration: {
  20.       type: Number,
  21.       default: 1000
  22.     }
  23.   },
  24.   data() {
  25.     return {
  26.       isShow: false
  27.     };
  28.   },
  29.   methods: {
  30.     show() {
  31.       this.isShow = true;
  32.       setTimeout(this.hide, this.duration);
  33.     },
  34.     hide() {
  35.       this.isShow = false;
  36.       // 清除自己
  37.       this.remove();
  38.     }
  39.   }
  40. };
  41. </script>

测试

  1. <template>
  2.   <div>
  3.     <!-- KForm -->
  4.     <KForm :model="model" :rules="rules" ref="loginForm">
  5.       <KFormItem label="用户名" prop="username">
  6.         <KInput v-model="model.username" placeholder="请输入用户名"></KInput>
  7.       </KFormItem>
  8.       <KFormItem label="密码" prop="password">
  9.         <KInput v-model="model.password" placeholder="请输入密码"></KInput>
  10.       </KFormItem>
  11.       <KFormItem>
  12.         <button @click="login">登录</button>
  13.       </KFormItem>
  14.     </KForm>
  15.   </div>
  16. </template>
  18. <script>
  19. import ElementTest from "@/components/form/ElementTest.vue";
  20. import KInput from "@/components/form/KInput.vue";
  21. import KFormItem from "@/components/form/KFormItem.vue";
  22. import KForm from "@/components/form/KForm.vue";
  23. import create from '@/utils/create'
  24. import Notice from '@/components/Notice.vue';
  26. export default {
  27.   components: {
  28.     ElementTest,
  29.     KInput,
  30.     KFormItem,
  31.     KForm
  32.   },
  33.   data() {
  34.     return {
  35.       model: {
  36.         username: "tom",
  37.         password: ""
  38.       },
  39.       rules: {
  40.         username: [{ required: true, message: "请输入用户名" }],
  41.         password: [{ required: true, message: "请输入密码" }]
  42.       }
  43.     };
  44.   },
  45.   methods: {
  46.     login() {
  47.       this.$refs.loginForm.validate(isValid => {
  48.         // this.$notice({})
  50.         // 创建notice实例
  51.         create(Notice, {
  52.           title: '村长喊你来搬砖',
  53.           message: isValid ? '请求登录': '校验失败',
  54.           duration: 3000
  55.         }).show()
  56.         // if (isValid) {
  57.         //   // 合法
  58.         //   console.log("request login");
  59.         // } else {
  60.         //   alert("校验失败！");
  61.         // }
  62.       });
  63.     }
  64.   }
  65. };
  66. </script>
  68. <style scoped>
  69. </style>

作业

image.png

1.

  • mixin emitter.js
  • 设置componentName

  • dispatch()

    1. function broadcast(componentName, eventName, params) {
    2. this.$children.forEach(child => {
    3.   var name = child.$options.componentName;
    5.   if (name === componentName) {
    6.     child.$emit.apply(child, [eventName].concat(params));
    7.   } else {
    8.     broadcast.apply(child, [componentName, eventName].concat([params]));
    9.   }
    10. });
    11. }
    12. export default {
    13. methods: {
    14.       //冒泡查找compnentName相同的组件并派发事件
    15.   dispatch(componentName, eventName, params) {
    16.     var parent = this.$parent || this.$root;
    17.     var name = parent.$options.componentName;
    18.           //向上查找直到找到相同名称的组件
    19.     while (parent && (!name || name !== componentName)) {
    20.       parent = parent.$parent;
    22.       if (parent) {
    23.         name = parent.$options.componentName;
    24.       }
    25.     }
    26.     // 如果找到就派发事件
    27.     if (parent) {
    28.       parent.$emit.apply(parent, [eventName].concat(params));
    29.     }
    30.   },
    31.   broadcast(componentName, eventName, params) {
    32.     broadcast.call(this, componentName, eventName, params);
    33.   }
    34. }
    35. };

    2.

  • Vue.extend

    1. const Ctor = Vue.extend(Component)
    2. const comp = new Ctor({propsData: props})
    3. comp.$mount();
    4. document.body.appendChild(comp.$el)
    5. comp.remove = () => {
    6. // 移除dom
    7. document.body.removeChild(comp.$el)
    8. // 销毁组件
    9. comp.$destroy();
    10. }

    使⽤插件进⼀步封装便于使⽤，create.js

    1. import Notice from '@/components/Notice.vue'
    2. //...
    3. export default {
    4. install(Vue) {
    5.        Vue.prototype.$notice = function (options) {
    6.        return create(Notice, options)
    7.    }
    8. }
    9. }