解决element中Input输入框组件触发事件失效问题

相信只要使用vue的朋友,对于element都不陌生,但是有时候会出现各种各样奇怪的问题;

那么如何解决 element 组件使用事件失效的问题:

问题① : input输入框 绑定键盘事件 @keyup 无效
​解决: 使用 .native 修饰符进行绑定

	<el-input
     	v-model="state"
	   	class="fl"
        placeholder="请输入内容"
        prefix-icon="el-icon-search el-input__icon"
        @keyup.native="searchList(state)"
    />

问题② :Cascader 级联选择器 绑定失去焦点事件 @blur 无效
解决:使用 .capture 修饰符进行绑定

	<el-cascader
    	v-model="text"
        :options="options.category"
        clearable
        filterable
        @blur.native.capture="getAddCategoryTags($event, 'category')"
   	/>

以上两个问题基本能解决关于element绑定事件的问题

收集各种疑难杂症,欢迎报名!

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input输入框停止输入触发事件可以通过监听input元素的input事件来实现。当用户在input输入框输入文字时,每输入一个字符都会触发一次input事件。我们可以通过设置一个计时器,在用户停止输入一段时间后触发所需的事件。 具体的实现步骤如下: 1. 监听输入框input事件,当该事件被触发时,执行相应的处理函数。 2. 在处理函数,首先清除之前设置的计时器(如果有),然后设置一个新的计时器。 3. 在计时器的回调函数执行需要触发的事件。在这个例子,我们可以弹出一个提示作为示例。 下面是一个简单的实现示例: ```html <!DOCTYPE html> <html> <head> <title>Input Stop Event</title> </head> <body> <input id="myInput" type="text" /> <script> let timer; const inputElement = document.getElementById('myInput'); inputElement.addEventListener('input', function() { clearTimeout(timer); // 清除计时器 timer = setTimeout(() => { alert('输入停止!'); // 在用户停止输入0.5秒后触发事件 }, 500); }); </script> </body> </html> ``` 在以上示例,我们监听了id为"myInput"的input元素的input事件,并在事件处理函数设置了一个计时器。当用户输入文字时,每次input事件被触发时,都会清除之前设置的计时器,并重新设置一个新的计时器。当用户停止输入0.5秒后,计时器的回调函数会被执行,触发一个提示弹出,表示输入已经停止。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值