今天就跟大家聊聊有關(guān)vue中怎么利用element實(shí)現(xiàn)一個(gè)區(qū)間選擇組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)武夷山,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18980820575

主要思路

1. 單個(gè)表單校驗(yàn)：必填項(xiàng)校驗(yàn)、正整數(shù)校驗(yàn)、區(qū)間校驗(yàn)

2. 關(guān)聯(lián)校驗(yàn)：右側(cè)閾值不得小于左側(cè)閾值

根據(jù)上面的思路，單個(gè)表單的校驗(yàn)屬于公共校驗(yàn)方法，關(guān)聯(lián)校驗(yàn)需要分別校驗(yàn)（因?yàn)閷?duì)比對(duì)象不同，且提示語(yǔ)不同），由此在自定義校驗(yàn)中有了如下定義：

rules: {
  min: [
    { required: true, message: '必填項(xiàng)，請(qǐng)維護(hù)', trigger: 'blur' },
    { validator: this.validateCom, trigger: 'blur' },
    { validator: this.validateMin, trigger: 'blur' },
  ],
  max: [
    { required: true, message: '必填項(xiàng)，請(qǐng)維護(hù)', trigger: 'blur' },
    { validator: this.validateCom, trigger: 'blur' },
    { validator: this.validateMax, trigger: 'blur' },
  ],
},

公共校驗(yàn)方法：正整數(shù)校驗(yàn)、區(qū)間校驗(yàn)

validateCom(rule, value, callback) {
  const one = Number(value);
  if (Number.isInteger(one)) {
    if (one < MIN_NUMBER) {
      return callback(new Error(`輸入值必須大于${MIN_NUMBER}`));
    } else if (one > MAX_NUMBER) {
      return callback(new Error(`輸入值必須小于${MAX_NUMBER}`));
    }
    return callback();
  }
  return callback(new Error('輸入值必須為正整數(shù)'));
},

注意：input輸出的始終是字符串類(lèi)型，需要轉(zhuǎn)換成數(shù)字后進(jìn)行比對(duì)

關(guān)聯(lián)校驗(yàn)：

validateMin(rule, value, callback) {
  const one = Number(value);
  const max = Number(this.form.max);
  if (!max || one < max) {
    return callback();
  }
  return callback(new Error('輸入值不得大于大閾值'));
},
validateMax(rule, value, callback) {
  const one = Number(value);
  const min = Number(this.form.min);
  if (!min || one > min) {
    return callback();
  }
  return callback(new Error('輸入值不得小于最小閾值'));
},

大概，你會(huì)想，這不就完了嗎！so easy！現(xiàn)在真正的坑才開(kāi)始

填坑（重點(diǎn)）

根據(jù)上面的寫(xiě)法，組件的基本功能實(shí)現(xiàn)了，但是有一個(gè)坑！如下：

很顯然，左側(cè)值是小于右側(cè)值的，但是校驗(yàn)提示仍然報(bào)錯(cuò)。究其原因，還是關(guān)聯(lián)校驗(yàn)的問(wèn)題。既然是關(guān)聯(lián)交驗(yàn)，改變其中一個(gè)時(shí)應(yīng)該會(huì)重新校驗(yàn)兩個(gè)。很簡(jiǎn)單，在input改變時(shí)，重新校驗(yàn)表單不就OK了嗎

handleChange() {
  this.$refs.form.validate();
}

真實(shí)表現(xiàn)正如我們所料，但是當(dāng)我們打開(kāi)console的時(shí)候，會(huì)看到Uncaught (in promise) false，這又是什么鬼，身為優(yōu)秀的前端工程師，你定不會(huì)允許自己的代碼里報(bào)錯(cuò)，即使不影響正常流程。

經(jīng)查證：Promise報(bào)錯(cuò)，Uncaught的意思是代表有reject狀態(tài)沒(méi)有被catch。究其原因，改變一個(gè)值時(shí)，校驗(yàn)整個(gè)表單時(shí)，改變的那個(gè)input會(huì)執(zhí)行兩次校驗(yàn)，導(dǎo)致異常。

最后做如下修改：

handleMinChange() {
  this.$refs.form.validateField('max');
},
handleMaxChange() {
  this.$refs.form.validateField('min');
},

// 并對(duì)外暴露操作方法
getFormData() {
  const ret = {};
  this.$refs.form.validate((valid) => {
    ret.valid = valid;
    ret.form = this.form;
  });
  return ret;
},
resetForm() {
  this.$refs.form.resetFields();
},

總結(jié)input表單輸出值為String類(lèi)型，即使設(shè)置了type=number關(guān)聯(lián)交驗(yàn)時(shí)需要驗(yàn)證其關(guān)聯(lián)項(xiàng)，且不能重復(fù)校驗(yàn)

全部代碼：

看完上述內(nèi)容，你們對(duì)vue中怎么利用element實(shí)現(xiàn)一個(gè)區(qū)間選擇組件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文名稱(chēng)：vue中怎么利用element實(shí)現(xiàn)一個(gè)區(qū)間選擇組件-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/poijd.html