重新封装el-input解决微软输入法问题

在项目的实际开发中，遇到了微软输入法的问题，会出现输入内容后enter回车后出现重复内容的问题，重新封装el-input组件便可解决问题。

另外提供一种将校验规则维护成静态变量，更好的使用input框的方式。

// c-input-filter.vue 文件

<template>
  <el-input
    v-model="inputFilterVal"
    v-bind="extraAttrs"
    :placeholder="placeholder || defaultPlaceholder"
    @input="handleInput"
    @blur="handleBlur"
    @focus="handleFocus"
    @change="handleChange"
  >
    <slot></slot>
    <slot
      name="prefix"
      v-if="$slots.prefix"
      slot="prefix"
    ></slot>
    <slot
      name="suffix"
      v-if="$slots.suffix"
      slot="suffix"
    ></slot>
    <slot
      name="prepend"
      v-if="$slots.prepend"
      slot="prepend"
    ></slot>
    <slot
      name="append"
      v-if="$slots.append"
      slot="append"
    ></slot>
  </el-input>
</template>
<script>
import i18n from '@/locale/index';
export default {
  name: 'CInputFilter',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    reg: {
      type: RegExp,
      default: null
    },
    replaceReg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      inputFilterVal: ''
    };
  },
  computed: {
    realValue () {
      return this.value;
    },
    defaultPlaceholder () {
      return i18n.t('common.placeholderInput');
    },
    extraAttrs () {
      return this.$attrs;
    }
  },
  watch: {
    realValue: {
      handler () {
        if (this.realValue !== this.inputFilterVal) {
          this.inputFilterVal = this.realValue;
        }
      },
      immediate: true
    }
  },
  methods: {
    handleInput (val) {
      if (this.reg) {
        val = val.replace(this.reg, this.replaceReg);
        this.inputFilterVal = val;
      }
      this.$emit('input', val);
    },

    handleBlur (...args) {
      this.$emit('blur', ...args);
    },

    handleFocus (...args) {
      this.$emit('focus', ...args);
    },

    handleChange (...args) {
      this.$emit('change', ...args);
    },

    focus () {
      if (this.$el.firstElementChild) {
        this.$el.firstElementChild.focus();
      }
    }
  }
};
</script>

将输入框校验规则统一维护到enum.js文件中

// enum.js
// 输入框校验规则
export const ENUM_STRREG = {
  STRING_NUMBER: /[^A-Za-z0-9]/g, // 仅支持字母，数字
  STRING_NUMBER_MORE: /[^a-zA-Z0-9_+-\s]/g, // 仅支持字母，数字，下划线，减号，加号，空格输入
  STRING_NUMBER_POINT_MORE: /[^\w@.]/g, // 仅支持字母，数字，下划线，@，.输入
  STRING_NUMBER_CHINESE: /[^a-zA-Z0-9\u4e00-\u9fa5]/g, // 仅支持字母，数字，中文输入
  STRING_NUMBER_CHINESE_MORE: /[^a-zA-Z0-9\u4e00-\u9fa5_+-\s]/g, // 仅支持字母，数字，中文,下划线，减号，加号，空格输入
  STRING_NUMBER_CHINESE_POINT_MORE: /[^a-zA-Z0-9\u4e00-\u9fa5_.+-\s]/g, // 仅支持字母，数字，中文,下划线，小数点，减号，加号，空格输入
  STRING_NUMBER_CHINESE_LINE: /[^a-zA-Z0-9\u4e00-\u9fa5_]/g, // 只能包含汉字、字母、数字或下划线
  MAIL_NAME_INPUT: /[^a-zA-Z0-9\u4e00-\u9fa5_#@()-]/g, // 仅用于通讯录管理姓名输入框
  NUMBER: /[^0-9]*/g, // 仅支持数字输入（用于联系电话输入框）
  SPACE: /\s+/g, // 空格过滤
  INPUT_SEARCH: /\/|\\/g, // 菜单列表搜索框作此限制，解决回车已输入字符丢失问题
  BOARD_PASSWORD: /[:&'"]/g // 添加门禁设备密码限制
};

在vue文件中直接使用，如果需要在模板中使用，请在data中定义再使用

import {
  ENUM_STRREG
} from '@/assets/js/enum';

<c-input-filter
    class="edit-form-input"
    v-model="formBoard.deviceName"
    :disabled="true"
    :maxlength="30"
    :reg="enum_strReg.STRING_NUMBER_CHINESE_LINE"
></c-input-filter>