vue directive input 限制

const trigger = (el, type) => {
  const e = new CustomEvent(type, {
    detail: {
      hazcheeseburger: true,
    },
  });
  el.dispatchEvent(e);
};
export default {
  mounted(el, binding, vnode) {
    const { arg } = binding;
    // 金额限制
    function limitMoney(value) {
      return value
        .replace(/[^\d.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace(/^0+/g, '0')
        .replace(/^0+\./g, '0.')
        .replace(/^0+\d/g, '0')
        .replace(/^(\d+)\.(\d\d).*$/, '$1.$2');
    }
    // 整数限制
    function limitInteger(value) {
      return value
        .replace(/[^\d]/g, '')
        .replace(/^0+/g, '0')
        .replace(/^0+\d/g, '0');
    }
    //中文
    function limitChinese(value) {
      return value.replace(/[^\u4e00-\u9fa5]/g, '');
    }
    //去除空格
    function limitTrim(value) {
      return value.replace(/\s*/g, '');
    }

    el.$handler = () => {
      let valueText = vnode.ctx.props.modelValue;
      switch (arg) {
        // 金额限制
        case 'money':
          vnode.ctx.props.modelValue = limitMoney(valueText.toString());
          break;
        // 整数限制
        case 'int':
          vnode.ctx.props.modelValue = limitInteger(valueText.toString());
          break;
        //限制位数
        case 'max':
          vnode.ctx.props.modelValue = valueText.slice(
            0,
            Number(binding.value ? binding.value : 20)
          );
          break;
        //中文
        case 'chinese':
          vnode.ctx.props.modelValue = limitChinese(valueText.toString());
          break;
        //去除空格
        case 'trim':
          vnode.ctx.props.modelValue = limitTrim(valueText.toString());
          break;
      }
      trigger(el, 'input');
    };
    el.$handler(el);
  },
  updated(el) {
    el.$handler && el.$handler(el);
  },
};

min.js引入

import myDirectiveName from '@/directive';

使用

<el-input maxlength="20" show-word-limit v-myDirectiveName:max="20" v-model="drawerTitle"/>