vue+element 基础组件（输入框，下拉框，日期框）二次封装

前言

组件库也已经上线运行了一段时间，该改的BUG也都解决了，也基本可以稳定运行了。今天就抽出点时间更新下文档方便日后查看！

背景

随着公司项目的迭代更新，业务需求越来越多，如果继续大规模使用element原生封装的组件，就会使得业务代码更加的繁琐并且难以维护。所以就决定把element进行二次封装，在封装之前查阅了一些资料，为了方便后期维护
最后决定分装成一个组件库！

设计思路

参考网上封装的思路，发现只是对el-input层进行封装，虽然在使用过程中可以简化一点使用代码，但是整体的封装层次不大。如果添加校验还是要和element一样单独添加relus,添加验证规则，如果这样的话封装的意义就不大了。
所以经过多方考虑直接把 el-form-item封装进去的话就可以把验证方法和正则规则一起封装到里面使用统一的验证方法和正则规则。

实现过程

一.封装输入框的核心用法就是实现组件的双向绑定，可以使得绑定的v-model用法和elelment保持一致

通过绑定props里的value 保证父组件中，v-bind:value可以正常设置值，子组件可以取到值。
然后在watch里监听props里的value，将得到的值直接赋值给当前页面的v-model

二.封装统一的验证规则

1.在el-form-item 里绑定rules验证,通过checkHour方法添加自定义校验参数

 :rules="[
       {
          required: prop && isRequired ? true : '',
          validator: (rule, value, callback) => {
            checkHour(rule, value, callback);
          }, //后面的这几个是传的自定义参数
          notrigger: 'blur',
        }
      ]"

checkHour(rule, value, callback) {
      if (this.sgccInputType == "mobile") {
        mobile(rule, value, callback, this.sgccLabelName); //手机号
      }else if (this.sgccInputType == "sgcustom") {
        sgcustom(rule, value, callback, this.custom, this.isempty); //自定义校验
      } else if (this.prop) {
        isCong(rule, value, callback, this.sgccLabelName); //空
      } else {
        callback();
      }
    },

2.添加验证方法js文件

/* 手机号 */
export function mobile(rule, value, callback,sgccLabelName = '内容') {
  const reg = /^1[3456789]\d{9}$/ 
  if (value == '' || value == undefined || value == null) {
      callback(new Error(`${sgccLabelName}不能为空`));
  } else {
      if ((!reg.test(value)) && value != '') {
          callback(new Error(`${sgccLabelName}填写错误，请重新填写`));
      } else {
          callback();
      }
  }
}
/* 自定义校验规则 */
export function sgcustom(rule, value, callback,sgrule,isempty = true) {
  // rule, 
  // value, //输入的值
  // callback,//回调检验
  // sgrule,//正则规则
  // isempty = false//是否校验 ‘是否为空’,默认校验

  // console.log(typeof sgrule)
  // console.log(value)
  // console.log(callback)
  // console.log(sgrule)
  let setsgrule = {error : "",atest : ""};
  if(typeof sgrule === 'string') setsgrule.error = sgrule;
  else setsgrule = sgrule;
  
  if (!value) {
    if(isempty) callback(new Error('内容不能为空'));
    else callback();
  } else {
    if ((!setsgrule.atest.test(value)) && value != '') {
      callback(new Error(setsgrule.error));//错误提示
    } else {
      callback();
    }
  }
}

3.自定义正则验证单独创建一个正则js全局注册

export default {
  QQ: { atest: /^[1-9]*[1-9][0-9]*$/, error: '不正确的腾讯QQ号' },
}

三.根据业务需求封装需要的输入参数(前置btn,后置bth,后置文字信息，错误提示信息，划过提示等...)

四.创建组件库项目，将封装好的基础组件(input,select,date,radio,dialog)等，放进去统一注册然后打包生成一个js文件，在其他项目里引用这个js就可以使用(后期可以发布到npm上)

组件库项目搭建思路后期单独写一篇文章

实现效果

例如input组件

总结

封装之后大幅缩减了代码数量并且也方便维护，同时也使得页面更加整洁。
其他的下拉框，日期框，单选框，弹窗都是相同的封装思路。
持续更新。。。

参考网站

element