vue inputラベル汎用命令チェックの実現

モバイル端末は通常、inputタグの入力に対していくつかの検査が必要であり、vueの命令は完璧な検査の役割を果たすことができる。
予想効果

<input v-model="times" :data-last_value="lastTimes" v-int v-max="8" v-min="2" />

属性data-last_valueの値はユーザー入力ボックスの前回のフォーカスを失った後に入力した値をキャッシュします。lastTimesは初期化された変数です。その後はこの値を勝手に変更しません。v-modelはdata-last_とは絶対にしないでください。valueは同じ変数を結合しています。これではユーザーの前回の入力値を覚えられないので、その値を使って検証が通らない場合に使います。
コマンド実行
以下の3つの命令は完全に独立して使用できます。
整数を検証

 const util = {
  isNumber(str) {
    const num = Number(str);
    return Math.floor(num) === num;
  }
 };
 directives: {
  int: {
   inserted: (el) => {
    let oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     //  data-last_value          ，    
     const lastValue = el.getAttribute('data-last_value');
     if (!util.isNumber(blurValue)) {
      util.toast('     ');
      el.value = lastValue;
      el.dispatchEvent(new Event('input'));
     }
     if (el.value === lastValue) return;
     //        
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

最小値を検証

directives: {
  min: {
   inserted: (el, binding) => {
    const oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     const min = binding.value;
     if (blurValue < min) {
      // util.toast        toast    
      util.toast(`       ${min}`);
      el.value = min;
      el.dispatchEvent(new Event('input'));
     }
     const lastValue = el.getAttribute('data-last_value');
     if (el.value === lastValue) return;
     //        
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

最大値を検証

 directives: {
  max: {
   //      
   inserted: (el, binding) => {
    const oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     const max = binding.value;
     if (blurValue > max) {
      util.toast(`       ${max}`);
      el.value = max;
      el.dispatchEvent(new Event('input'));
     }
     const lastValue = el.getAttribute('data-last_value');
     if (el.value === lastValue) return;
     //        
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

小さい検査命令は意外に細かいところがあります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。