ivew组件输入框清除内容后失焦问题

wtlei666

于 2025-02-12 11:29:15 发布

阅读量172

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript html view design vue

本文链接：https://blog.youkuaiyun.com/wtlei666/article/details/145588081

在ivewUI组件中，input组件点击清楚按钮后，form表单回车时间没有触发，原因是input组件点击清楚按钮后失焦了，解决办法就是在点击清楚按钮重新获取光标。

解决办法一

在点击清楚后用refs重新获取光标

 <Input ref='input' v-model="value14" placeholder="Enter something..." clearable style="width: 200px"  @on-clear='refs.input.focus()'/>

解决办法二

全局修改input的on-clear方法

import iView from 'view-design'

iView.Input.methods.handleClear = function (e){
    let doms = e.target.parentNode.children
    doms.forEach(item =>{
        if(item.nodeName == 'INPUT'){
            item.value = ''
            item.focus()
            this.$emit('input', '')
            this.setCurrentValue( '')
            this.$emit('on-change', item)
            this.$emit('on-clear', '')
        }
    })
}