vue 中，自定义指令，带参数

一.自定义指令(创建一个新的js文件)

export default {

  bind(el, binding) {

    const inputHandler = (event) => {

      // 使用 setTimeout 确保输入事件在中文输入法输入完成后触发

      setTimeout(() => {

        // 正则表达式：匹配整数或带小数点的数字

        //  const regex = /^\D*(\d{0,}(?:\.\d{0,})?).*$/;

        const decimalPlaces = binding.arg || 2; // 默认小数点后两位，如果未传递参数则默认为 2

        const regex = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,${decimalPlaces}})?).*`);

        // 获取当前输入框的值

        let value = event.target.value;

        // 使用正则表达式替换非法字符

        value = value.replace(regex, '$1');

        // 更新输入框的值

        event.target.value = value;

        // 手动触发 input 事件，更新 v-model

        const inputEvent = new Event('input');

        event.target.dispatchEvent(inputEvent);

        // 如果绑定了方法，则调用

        if (binding.value) {

          binding.value(event);

        }

      }, 0);

    };

    el.addEventListener('input', inputHandler);

    el.__inputHandler__ = inputHandler; // 保存处理器，以便在 unbind 时移除

  },

  unbind(el) {

    el.removeEventListener('input', el.__inputHandler__);

    delete el.__inputHandler__;

  }

};

二.引用 （main.js）

import inputRestrict from '@/utils/onlyDecimal';

Vue.directive('input-restrict', inputRestrict)

三.调用

v-input-restrict:[2]="tradeTotalChange"

v-input-restrict:指令调用

:[2] ： 传参

tradeTotalChange：方法调用

              <el-input v-else v-model="formData.tradeTotal" :placeholder="申报总价" maxlength="20" v-input-restrict:[2]="tradeTotalChange" ></el-input>