[JavaScript知识库]ie 8 9低版本input下的兼容问题（vue/iview/iview-design）

事件背景：项目使用了view+iview做的项目，需要在ie低版本浏览器下做兼容

问题代码：

// template 
<i-col span="4">
          <Input
            v-model="pickerMobile"
            clearable
            :maxlength="11"
            autocomplate="off"
            placeholder="请输入手机号码"
            @on-change="checkPickerMobile"
            class=""
          />
        </i-col>

// method
checkPickerMobile: debounce(function () {
      if (!validatemobile(this.pickerMobile, false)) {
        this.$Message.warning('手机号有误')
        return false
      }
    }, 1500),

事件描述：ie浏览器下，会自动执行?@on-change="checkPickerMobile" 方法，但这不是我想要的

查看iview源码：

// template
<input
                :id="elementId"
                :autocomplete="autocomplete"
                :spellcheck="spellcheck"
                ref="input"
                :type="currentType"
                :class="inputClasses"
                :placeholder="placeholder"
                :disabled="itemDisabled"
                :maxlength="maxlength"
                :readonly="readonly"
                :name="name"
                :value="currentValue"
                :number="number"
                :autofocus="autofocus"
                @keyup.enter="handleEnter"
                @keyup="handleKeyup"
                @keypress="handleKeypress"
                @keydown="handleKeydown"
                @focus="handleFocus"
                @blur="handleBlur"
                @compositionstart="handleComposition"
                @compositionupdate="handleComposition"
                @compositionend="handleComposition"
                @input="handleInput"
                @change="handleChange">

// method
 handleInput (event) {
                if (this.isOnComposition) return;

                let value = event.target.value;
                if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value);
                this.$emit('input', value);
                this.setCurrentValue(value);
                this.$emit('on-change', event);
            },
            handleChange (event) {
                console.log("handleChange")
                this.$emit('on-input-change', event);
            },

从中可以看出，iview的?on-change实际上监听的是input

?问题的根源：vue在渲染html模版的时候，如果模版中有类似如下的代码，input 被初始化赋值，即使赋了空值（即input值没有发生改变）@input事件也会触发

但是在其他浏览器，Chrome, Firefox, Edge, Safari 则不会触发@input 事件

问题解决方案：

1、笨拙的方法，在不看源码的情况下，利用中间变量，初始值来处理

checkIdcard: debounce(function () {
        // 判断是否首次进入
      if (this.firstRequestIdCard) {
        this.firstRequestIdCard = false
        return
      }
      if (!isCardNo(this.pickerIdcard)) {
        this.$Message.warning('身份证号码有误')
        return false
      }
    }, 2000),

2、根源解决，监听input的change事件，而不是input事件，使用@on-input-change方法

<i-col span="6">
          <Input
            v-model="pickerIdcard"
            clearable
            autocomplate="off"
            placeholder="请输入身份证"
            @on-input-change="checkIdcard"
            class=""
          />

PS： iview本身提供了@on-input-change的方法，但是官方api文档并未说明和提供??https://www.iviewui.com/components/inputhttps://www.iviewui.com/components/input