vue键盘事件点击事件加native操作

2023-07-19 19:17:03 84

如下所示：



系统登录






记住密码

登录

如上代码，后台管理系统的登录。在账号和密码中加入了键盘enter事件，监听时需要加.native才能正确使用；下面按钮的点击事件同样要加.native才能正常使用。

参考官方文档：

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用v-on的.native修饰符：

在有的时候这是很有用的，不过在你尝试监听一个类似的非常特定的元素时，这并不是个好主意。比如上述组件可能做了如下重构，所以根元素实际上是一个元素：


{{label}}

这时，父级的.native监听器将静默失败。它不会产生任何报错，但是onFocus处理函数不会如你预期地被调用。

为了解决这个问题，Vue提供了一个$listeners属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：

{
focus:function(event){/*...*/}
input:function(value){/*...*/},
}

有了这个$listeners属性，你就可以配合v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。对于类似的你希望它也可以配合v-model工作的组件来说，为这些监听器创建一个类似下述inputListeners的计算属性通常是非常有用的：

Vue.component('base-input',{
inheritAttrs:false,
props:['label','value'],
computed:{
inputListeners:function(){
varvm=this
//`Object.assign`将所有的对象合并为一个新对象
returnObject.assign({},
//我们从父级添加所有的监听器
this.$listeners,
//然后我们添加自定义监听器，
//或覆写一些监听器的行为
{
//这里确保组件配合`v-model`的工作
input:function(event){
vm.$emit('input',event.target.value)
}
}
)
}
},
template:`

{{label}}


`
})

现在组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的元素一样使用了：所有跟它相同的特性和监听器的都可以工作。

这里直接将官方文档copy过来了，也就是说当我们要监听组件的键盘事件或者点击事件的时候是不需要加.native的，而监听组件的就需要加.native才能使用了；但当你需要监听的内容是组件的子元素的时候.native也是不会生效的，此时官方又给了处理的办法就是使用v-on="$listeners"。

补充知识：Vue关于@keyup.enter.native

看代码的时候遇到了

其实这个可以写成

<

用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native

这个大概意思就是监听键盘回车事件，并运行相应的nextInput函数

以上这篇vue键盘事件点击事件加native操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

vue键盘事件点击事件加native操作

热门推荐

随机推荐