快捷導(dǎo)航

vue基于element的區(qū)間選擇組件

更新時(shí)間：2018年09月07日 09:33:46 作者：同夢(mèng)奇緣

這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

公司的系統(tǒng)中，產(chǎn)品經(jīng)理在設(shè)計(jì)時(shí)經(jīng)常要求對(duì)某個(gè)字段進(jìn)行區(qū)間閾值設(shè)置或者作為篩選條件。但是苦于element中沒有非常契合的組件（slider組件并不支持兩端均能設(shè)定），于是自己動(dòng)手造了一個(gè)。

成果

最終的展示效果如下：

需求

這里以項(xiàng)目的需求為例，基本的需求如下：

分為左右值，包含左右值，正整數(shù)
左側(cè)必須大于等于1，右側(cè)不得大于100000，右側(cè)值必須不小于左側(cè)
默認(rèn)：左側(cè)20，右側(cè)100000，均必填
失焦校驗(yàn)

頁面和表單校驗(yàn)結(jié)構(gòu)一樣：

<el-form ref="form" :model="form" :rules="rules">
  <el-form-item prop="min">
    <el-input v-model="form.min" />
  </el-form-item>
  ~
  <el-form-item prop="max">
    <el-input v-model="form.max" />
  </el-form-item>
</el-form>

主要思路

單個(gè)表單校驗(yàn)：必填項(xiàng)校驗(yàn)、正整數(shù)校驗(yàn)、區(qū)間校驗(yàn)
關(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à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輸出的始終是字符串類型，需要轉(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)在真正的坑才開始

填坑（重點(diǎn)）

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

很顯然，左側(cè)值是小于右側(cè)值的，但是校驗(yàn)提示仍然報(bào)錯(cuò)。究其原因，還是關(guān)聯(lián)校驗(yà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)我們打開console的時(shí)候，會(huì)看到Uncaught (in promise) false，這又是什么鬼，身為優(yōu)秀的前端工程師，你定不會(huì)允許自己的代碼里報(bào)錯(cuò)，即使不影響正常流程。

經(jīng)查證：Promise報(bào)錯(cuò)，Uncaught的意思是代表有reject狀態(tà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類型，即使設(shè)置了type=number關(guān)聯(lián)交驗(yàn)時(shí)需要驗(yàn)證其關(guān)聯(lián)項(xiàng)，且不能重復(fù)校驗(yàn)

全部代碼：

<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: '必填項(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' },
    ],
   },
  };
 },
 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: