前言

組件庫也已經上線運行了一段時間，該改的BUG也都解決了，也基本可以穩(wěn)定運行了。今天就抽出點時間更新下文檔方便日后查看！

背景

隨著公司項目的迭代更新，業(yè)務需求越來越多，如果繼續(xù)大規(guī)模使用element原生封裝的組件，就會使得業(yè)務代碼更加的繁瑣并且難以維護。所以就決定把element進行二次封裝，在封裝之前查閱了一些資料，為了方便后期維護
最后決定分裝成一個組件庫！

設計思路

參考網上封裝的思路，發(fā)現(xiàn)只是對el-input層進行封裝，雖然在使用過程中可以簡化一點使用代碼，但是整體的封裝層次不大。如果添加校驗還是要和element一樣單獨添加relus,添加驗證規(guī)則，如果這樣的話封裝的意義就不大了。
所以經過多方考慮直接把 el-form-item封裝進去的話就可以把驗證方法和正則規(guī)則一起封裝到里面使用統(tǒng)一的驗證方法和正則規(guī)則。

實現(xiàn)過程

一.封裝輸入框的核心用法就是實現(xiàn)組件的雙向綁定，可以使得綁定的v-model用法和elelment保持一致

通過綁定props里的value 保證父組件中，v-bind:value可以正常設置值，子組件可以取到值。
然后在watch里監(jiān)聽props里的value，將得到的值直接賦值給當前頁面的v-model

二.封裝統(tǒng)一的驗證規(guī)則

1.在el-form-item 里綁定rules驗證,通過checkHour方法添加自定義校驗參數(shù)

 :rules="[
       {
          required: prop && isRequired ? true : '',
          validator: (rule, value, callback) => {
            checkHour(rule, value, callback);
          }, //后面的這幾個是傳的自定義參數(shù)
          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();
      }
  }
}
/* 自定義校驗規(guī)則 */
export function sgcustom(rule, value, callback,sgrule,isempty = true) {
  // rule, 
  // value, //輸入的值
  // callback,//回調檢驗
  // sgrule,//正則規(guī)則
  // 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.自定義正則驗證單獨創(chuàng)建一個正則js全局注冊

export default {
  QQ: { atest: /^[1-9]*[1-9][0-9]*$/, error: '不正確的騰訊QQ號' },
}

三.根據(jù)業(yè)務需求封裝需要的輸入?yún)?shù)(前置btn,后置bth,后置文字信息，錯誤提示信息，劃過提示等...)

四.創(chuàng)建組件庫項目，將封裝好的基礎組件(input,select,date,radio,dialog)等，放進去統(tǒng)一注冊然后打包生成一個js文件，在其他項目里引用這個js就可以使用(后期可以發(fā)布到npm上)

組件庫項目搭建思路后期單獨寫一篇文章

實現(xiàn)效果

例如input組件
<sg-input
     sgccLabelName="QQ號"
     v-model="sgFrom.QQ"
     prop="QQ"
     sgccInputType="sgcustom"
     :custom="$RegExp.QQ"
></sg-input>

總結

封裝之后大幅縮減了代碼數(shù)量并且也方便維護，同時也使得頁面更加整潔。
其他的下拉框，日期框，單選框，彈窗都是相同的封裝思路。
持續(xù)更新。。。

參考網站

element