1.el-input 輸入框扫夜，只能輸入數(shù)字，并且可限制上下限驰徊，保留小數(shù)位數(shù)

• 1.輸入的不是數(shù)字失去焦點時值會被清空【包括科學計數(shù)法 e 也不能輸入】
• 2.可配置輸入值的范圍笤闯，超出范圍給出提示并清空
• 3.可配置小數(shù)位數(shù)

import { Message } from 'element-ui';
// 判斷值是否為空，注意：0是有值的
function isNUll(val) {
  return val === null || val === void 0 || val === '' || val.toString() === 'NaN';
}

/**
 * author: yf
 * date: 20241212
 * 對input type="number" 類型輸入框的擴展棍厂，
 * 1.輸入的不是數(shù)字失去焦點時值會被清空【包括科學計數(shù)法 e 也不能輸入】
 * 2.可配置輸入值的范圍颗味，超出范圍給出提示并清空
 * 3.可配置小數(shù)位數(shù)
 *
 * 注意搭配 type="number" 使用效果最佳
 * 使用方式：
 *
 * 方式一：使用默認配置，只是限制了輸入的只能是數(shù)字【包括e也不能輸入】牺弹，不然會被清空
 * v-number-input-extend
 *
 * 方式二：帶參數(shù)浦马，注意: 所有參數(shù)都是可選
 * v-number-input-extend = "{
      label: 'xxx輸入框', // 這個輸入框的label值，用于提示
      min: 0, // 輸入值的最小值 - 不傳則不會處理
      max: 100, // 輸入值的最大值 - 不傳則不會處理
      toFixed: 2, // 值的小數(shù)位數(shù) - 不傳則不會處理
      isPrompt: true, // 不滿足驗證條件時是否提示张漂，比如最大最小值的驗證
      isClearZero: false // 值為0時晶默，是否置為空 - 不傳則不會處理
 * }"
 */
Vue.directive('number-input-extend', {
  inserted(el, binding, vnode) {
    // 配置
    let {
      label = '', // 這個輸入框的label值，用于提示
      min, // 輸入值的最小值
      max, // 輸入值的最大值
      toFixed, // 值的小數(shù)位數(shù)
      isPrompt = true, // 不滿足驗證條件時是否提示航攒，比如最大最小值的驗證
      isClearZero = false // 值為0時磺陡，是否置為空 - 某些場景會用到
    } = binding.value || {};

    let $input = vnode.componentInstance;
    // 設置輸入框的值,觸發(fā)input事件,改變v-model綁定的值
    const setVal = val => {
      if ($input) {
        // 如果是自定義組件就觸發(fā)自定義組件的input事件
        $input.$emit('input', val);
      } else {
        // 如果是原生組件就觸發(fā)原生組件的input事件
        el.value = val;
        el.dispatchEvent(new Event('input'));
      }
    };

    el._customData = {
      blur: event => {
        const e = event || window.event;
        // 去掉非數(shù)字字符
        let strVal = String(e.target.value || '').replace(/[^\-\d.]/g, '')
        let val = parseFloat(strVal);
        if (isNUll(val)) {
          val = '';
        }
        if (val !== '' && !isNUll(toFixed)) {
          val = Number(val.toFixed(toFixed));
        }

        // 值為0時，置為空
        if (isClearZero && val === 0) {
          val = '';
        }

        // #region 值范圍判斷
        if (val !== '') {
          if (!isNUll(min) && !isNUll(max)) {
            if (val < min || val > max) {
              val = '';
              isPrompt &&
                Message({
                  message: `${label}值的范圍應該是${min}-${max}`,
                  type: 'warning'
                });
            }
          } else if (!isNUll(min)) {
            if (val < min) {
              val = '';
              isPrompt &&
                Message({
                  message: `${label}值的最小值為${min}`,
                  type: 'warning'
                });
            }
          } else if (!isNUll(max)) {
            if (val > max) {
              val = '';
              isPrompt &&
                Message({
                  message: `${label}值的最大值為${max}`,
                  type: 'warning'
                });
            }
          }
        }
        // #endregion 值范圍判斷

        e.target.value = val;
        setVal(val);
      }
    };
    el.addEventListener('focusout', el._customData.blur);
  },
  /* eslint-disable no-unused-vars */
  unbind(el) {
    // 解綁
    if (el._customData && el._customData.blur) return;
    el.removeEventListener('focusout', el._customData.blur);
  }
});

2.div 盒子寬高變化觸發(fā)resize回調

/**
 * div resize
 * author: yf
 */
Vue.directive('resize', {
  bind: function(el, binding) {
    let callbackFn = binding.value; // div resize后的回調函數(shù)
    if (!callbackFn) return;

    let t = binding.arg; // arg：傳給指令的參數(shù)，可選仅政。例如 v-resize:60 中垢油，參數(shù)為 "60"
    t = t === void 0 ? 100 : Number(t); // 防抖時間

    // console.log(callbackFn, t)

    let resizeBox = el;
    let domInfo = {
      width: 0,
      height: 0
    };
    let resizeObserver = new ResizeObserver(
      debounce(() => {
        let oldDomInfo = domInfo;
        let newDomInfo = (domInfo = getDomWH(el));
        try {
          // console.log('div resize ....');
          callbackFn &&
            callbackFn({
              resizeBox: el, // 當前 resize 的dom信息
              oldDomInfo, // resize 前的寬高信息
              newDomInfo // resize 后的寬高信息
            });
        } catch (e) {
          // console.error('div resize', e);
        }
      }, t)
    ); // 會在繪制前和布局后調用 resize 事件，因此不用提前調用 event_resize 方法

    el._vResize = resizeObserver;
    resizeObserver.observe(resizeBox);
  },
  unbind: function(el, binding) {
    let callbackFn = binding.value; // 回調函數(shù)
    if (!callbackFn) return;

    let resizeBox = el;
    let resizeObserver = el._vResize;
    if (!resizeObserver) return;
    resizeObserver.unobserve(resizeBox);
    delete el._vResize;
  }
});

3 input focus

/**
 * author: yf
 * date: 20250109
 * input focus
 * 注意：在 el-table 行編輯時使用此指令可能不會生效圆丹，因為 el-table 存在fixed列時滩愁，focus的是fixed table 中的 input
 * */
Vue.directive('input-focus', {
  inserted: function (el) {
    if(el.nodeName.toLocaleLowerCase() === 'input'){
      el.focus()
    }else{
      let input = el.querySelector('input')
      input && input.focus()
    }
  }
});

4 el-table 內某個el-input 的 td 掛載時focus

給el-input 綁定了 blur 事件時可能用到這個指令，因為如果沒觸發(fā)focus是不會觸發(fā) blur 事件的

// 組件內自定義指令
  directives: {
    'tableIn-elInput-focus': {
      // 指令的定義
      inserted: function (el, binding, vnode) {
        try {
          let tableInx = vnode.context.$refs['MaterialTable'] // 這個el-table 節(jié)點是綁定了ref的辫封， ref =“MaterialTable”
          if(!tableInx || !tableInx.$el) return
          // 因為el-table 表格在表格列 fixed 的時候會創(chuàng)建一模一樣的節(jié)點硝枉，有以下操作為了正確定位節(jié)點：
          let parentDom = tableInx.$el.querySelector('.el-table__body-wrapper')
          if(parentDom && parentDom!== el && parentDom.contains(el)){
            el.querySelector('.el-input__inner').focus()
          }
        }catch(e){
          console.error('tableIn-focus', e)
        }
      }
    }
  },

若對你有幫助，請點個贊吧倦微，若能打賞不勝感激妻味，謝謝支持！
本文地址：http://www.reibang.com/p/6af71018f716欣福，轉載請注明出處责球，謝謝。