vue中怎么利用element實現(xiàn)一個區(qū)間選擇組件

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

慶陽網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,慶陽網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為慶陽千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的慶陽做網(wǎng)站的公司定做！

主要思路

1. 單個表單校驗：必填項校驗、正整數(shù)校驗、區(qū)間校驗

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

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

rules: {
  min: [
    { required: true, message: '必填項，請維護', trigger: 'blur' },
    { validator: this.validateCom, trigger: 'blur' },
    { validator: this.validateMin, trigger: 'blur' },
  ],
  max: [
    { required: true, message: '必填項，請維護', trigger: 'blur' },
    { validator: this.validateCom, trigger: 'blur' },
    { validator: this.validateMax, trigger: 'blur' },
  ],
},

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

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輸出的始終是字符串類型，需要轉(zhuǎn)換成數(shù)字后進行比對

關(guān)聯(liá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('輸入值不得小于最小閾值'));
},

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

填坑（重點）

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

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

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

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

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

最后做如下修改：

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

// 并對外暴露操作方法
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類型，即使設(shè)置了type=number關(guān)聯(lián)交驗時需要驗證其關(guān)聯(lián)項，且不能重復(fù)校驗

全部代碼：

<template>
 <el-form ref="form" :model="form" :rules="rules">
  <el-form-item prop="min">
   <el-input v-model="form.min" @change="handleMinChange" />
  </el-form-item>
  ~
  <el-form-item prop="max">
   <el-input v-model="form.max" @change="handleMaxChange" />
  </el-form-item>
 </el-form>
</template>
 
<script>
const MIN_NUMBER = 1;
const MAX_NUMBER = 100000;
 
export default {
 data() {
  return {
   form: { min: '20', max: '100000' },
   rules: {
    min: [
     { required: true, message: '必填項，請維護', trigger: 'blur' },
     { validator: this.validateCom, trigger: 'blur' },
     { validator: this.validateMin, trigger: 'blur' },
    ],
    max: [
     { required: true, message: '必填項，請維護', trigger: 'blur' },
     { validator: this.validateCom, trigger: 'blur' },
     { validator: this.validateMax, trigger: 'blur' },
    ],
   },
  };
 },
 methods: {
  getFormData() {
   const ret = {};
   this.$refs.form.validate((valid) => {
    ret.valid = valid;
    ret.form = this.form;
   });
   return ret;
  },
  resetForm() {
   this.$refs.form.resetFields();
  },
  handleMinChange() {
   this.$refs.form.validateField('max');
  },
  handleMaxChange() {
   this.$refs.form.validateField('min');
  },
  validateCom(rule, value, callback) {
   const one = Number(value);
   if (Number.isInteger(one)) {
    if (one < MIN_NUMBER) {
     return callback(new Error('輸入值必須大于0'));
    } else if (one > MAX_NUMBER) {
     return callback(new Error('輸入值必須小于100000'));
    }
    return callback();
   }
   return callback(new Error('輸入值必須為正整數(shù)'));
  },
  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('輸入值不得小于最小閾值'));
  },
 },
};
</script>

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

網(wǎng)站名稱：vue中怎么利用element實現(xiàn)一個區(qū)間選擇組件
網(wǎng)址分享：http://bm7419.com/article32/igcspc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站制作、云服務(wù)器、小程序開發(fā)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)