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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值