Vue-component | 自定义Form组件

日常开发中积累了不少可能对一些开发有帮助的简单易用的组件,好记性不如烂笔头,想对过去的一些零零乱乱的东西做一些总结,反省自己的同时也便于思考一些更优的方法,提升下开发思维。
代码传送门(感觉有作用的的同学帮忙点下❤️️)

效果截图

先上效果图,自定义规则,违反规则马上显示提示。


Form

组件结构

参照elementUI的表单组件,组件的结构是Form > ... (FormItem > Form组件)

    // Form
         //  FormItem
                 // content
    
    //  ...可以添加多个Item

核心代码

Form组件
最上级是Form组件,是进行全局验证的组件,并且接收prop(传递的数据模型和规则),并将自身注入到子级中。





FormItem组件
用item组件包裹表达内容组件,目的是为了进行单一校验,并产生错误的提示信息。这里使用的是async-validator第三方的校验库,需要额外装载。





Input组件
内容组件,在这里进行内容的监听,上到FormItem进行校验




使用
使用组件就和elementUI一样进行处理即可



                    
                    

你可能感兴趣的:(Vue-component | 自定义Form组件)