码迷,mamicode.com
首页 > 其他好文 > 详细

vue组件化开发实战 - 实现简易ElementUI的Form表单组件

时间:2019-12-08 15:33:42      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:VID   OLE   put   默认   UNC   model   tar   port   class   

Input 组件

功能:

  • 进行数据双绑
  • 通知FormItem组件校验
<template>
  <div>
     <input  :type="type" :value="value" @input="onInput" v-bind="$attrs" >
  </div>
</template>
<script>
export default {
    inheritAttrs:false,
    props:{
        value:{
            type: String,
            default: ''
        },
        type:{
            type: String,
            default: 'text'
        },  
    },
    methods:{
        onInput(e){
            this.$emit('input',e.target.value);
            // 让父组件自己派发自己监听该valid事件进行校验。 
            this.$parent.$emit('valid');
        }
    }
}
</script>

$attrsv-bind="$attrs" 使用

  • $attrs是vue内置属性用来存储外部传向一个组件但没有被props接收的属性。
  • 这些属性都有非prop特性
    1. 会被自动添加到组件的根元素上。
    2. 默认情况下,非prop特性的属性会覆盖组件根元素上同名的内容。 对于styleclass有特殊处理:进行合并(但是如果是同名样式则会覆盖)
    3. 如果不希望组件根元素继承非prop特性,可以在组件配置项中配置 inheritAttrs:false ( 该API对style和class没影响 )

v-bind="$attrs"是对$attrs进行解构赋值的一种方法,解构成:key="value"形式。

FormItem 组件

功能:

  • 校验
  • label显示
  • 错误显示
<template>
  <div>
    <label v-if="label">{{label}}</label>
    <slot></slot>      
    <p v-if="error">{{error}}</p>
  </div>
</template>
<script>
  import Schema from 'async-validator'; // 校验包
  export default {
    inject:['form'],
    props:{
      label:{
        type:String,
        default:''
      },
      prop:{
        type:String,
        default:''
      }
    },
    data(){
      return {
        error:''
      }
    },
    mounted(){
      this.$on('valid',()=>{
          this.validate();
      })
    },
    methods:{
      validate(){
        const rules = this.form.rules[this.prop];
        const value = this.form.model[this.prop];

        const schema = new Schema({[this.prop]:rules});
        // 返回Promise<Boolean>
        return schema.validate({[this.prop]:value},(errors)=>{
          if(errors){
            this.error = errors[0].message;
          }else{
            this.error = '';
          }
        })
      }
    }
  }
</script>   

Form 组件

功能:

  • 提供数值
<template>
    <div>
        <slot></slot>
    </div>
</template>
<script>
export default {
    provide(){
        return {
            form:this  // 把form组件实例传给后代,后代可以通过该实例访问该组件上的属性 model、rule ...
        }
    },
    props:{
        model:{
            type:Object,
            reuqired:true
        },
        rules:{
            type:Object,
        }
    },
    methods:{
        validate(cb){
            const checkRes = this.$children
            .filter(item => item.prop)
            .map(item => item.validate());

            Promise.all(checkRes)
            .then(()=>cb(true))
            .catch(()=>cb(false));
        }
    }
}
</script>

通用库开发中常用的跨层级传参方法 provide / inject

  1. 祖代设置provide配置项,该项类似于data的用法,但是它的数据是给后代用的,不是给自己用的。
  2. 后代通过inject配置项获取祖代提供的数据。

        inject: ['form'] // 祖代provide中的key值

    通过该方式可以避免第三方库的引入如vuex,如果层级深也不需要通过props的方法进行繁琐的传递。

使用

<template>
    <div>
        <Form :model="model" :rules="rules" ref="myform">
            <FormItem label="用户名" prop="username">
                <Input v-model="model.username" placeholder="输入用户名" @ev="func" />
            </FormItem>
            <FormItem label="密码" prop="password" >
                <Input v-model="model.password" placeholder="输入密码" type="password" @ev="func" />
            </FormItem>
             <FormItem >
                 <button @click="submitForm('myform')">提交</button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import Input from '@/components/form/Input'; 
import Form from '@/components/form/Form'; 
import FormItem from '@/components/form/FormItem';
export default {
    components:{
        Input,
        Form,
        FormItem
    },
    data(){
        return{
            model:{
                username:'',
                password:'',
            },
            rules:{
                username:[{required:true,message:'用户名必填'}],            
                password:[{required:true,message:'密码必填'}],
            },
        }
    },
    methods:{
        submitForm(form){
            this.$refs[form].validate(valid=>{
                if(valid){
                    alert('校验通过');
                }else{
                    alert('校验失败');
                }
            })
        }
    }
}
</script> 

问题总结

  1. 为什么数据模型model放在form上?
    为了验证方便,From内的FormItem验证可能有很多,如果都写在FormItem上会很繁琐。
  2. FormItem上为什么要写prop?
    为了判别是对model里的哪部分进行校验,也是通过这个prop去获取规则中的key。

vue组件化开发实战 - 实现简易ElementUI的Form表单组件

标签:VID   OLE   put   默认   UNC   model   tar   port   class   

原文地址:https://www.cnblogs.com/juyouji/p/12005509.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!