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

 更新时间:2020年07月27日 11:39:56   作者:墨咎  
这篇文章主要介绍了vue键盘事件点击事件加native操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<el-card class="box-card animated flipInY">
   <el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="50px" class="demo-ruleForm">
    <h3 class="login_title">系统登录</h3>
    <el-form-item label="账号" prop="account">
     <el-input type="text" v-model="ruleForm2.account" @keyup.native.enter="handleSubmit2" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="checkPass">
     <el-input type="password" v-model="ruleForm2.checkPass" @keyup.native.enter="handleSubmit2" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox label="记住密码" v-model="checked" class="remember">记住密码</el-checkbox>
    <el-form-item >
     <el-button type="primary" class="login_btn" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
    </el-form-item>
   </el-form>
  </el-card>

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

参考官方文档:

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

<base-input v-on:focus.native="onFocus"></base-input>

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

<label>
 {{ label }}
 <input
  v-bind="$attrs"
  v-bind:value="value"
  v-on:input="$emit('input', $event.target.value)"
 >
</label>

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

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

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

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

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

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

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

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

看代码的时候遇到了

<el-input @keyup.enter.native="nextInput">

其实这个可以写成

<<el-input v-on:keyup.enter.native="nextInput">

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

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

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

相关文章

  • Vue3的路由传参方法超全汇总

    Vue3的路由传参方法超全汇总

    vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue3路由传参方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • 解决IOS端微信H5页面软键盘弹起后页面下方留白的问题

    解决IOS端微信H5页面软键盘弹起后页面下方留白的问题

    微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白。这篇文章主要介绍了决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) ,需要的朋友可以参考下
    2019-06-06
  • vue实现横屏滚动公告效果

    vue实现横屏滚动公告效果

    这篇文章主要为大家详细介绍了vue实现横屏滚动公告效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue数据更新视图未更新的几种解决方案

    Vue数据更新视图未更新的几种解决方案

    本文主要介绍在vue项目中,遇到数据更新但视图不更新的情况时,无法使用watch监听、无法使用this.$set方法,同时使用this.$forceUpdate()无效时,所使用的解决方案,需要的朋友可以参考下
    2024-02-02
  • 解决vue+ element ui 表单验证有值但验证失败问题

    解决vue+ element ui 表单验证有值但验证失败问题

    这篇文章主要介绍了vue+ element ui 表单验证有值但验证失败,本文通过实例代码给大家分享解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue中字符串如何拼接路由path路径

    vue中字符串如何拼接路由path路径

    这篇文章主要介绍了vue中字符串如何拼接路由path路径方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • MVVM模型在Vue中的使用详解

    MVVM模型在Vue中的使用详解

    MVVM模型主要是为了分离视图(View)和模型(Model),其优点为:低耦合、可重用性、独立开发以及可测试,视图和模型分离的特点给了 Vue 很大的启发,这篇文章主要介绍了MVVM模型在Vue中的使用,需要的朋友可以参考下
    2022-11-11
  • 解读Vue-loader的相关知识

    解读Vue-loader的相关知识

    这篇文章主要介绍了解读Vue-loader的相关知识,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue中的assets和static目录:使用场景及区别说明

    Vue中的assets和static目录:使用场景及区别说明

    这篇文章主要介绍了Vue中的assets和static目录:使用场景及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vue3使用Facebook嵌入式视频播放器API方法详解

    vue3使用Facebook嵌入式视频播放器API方法详解

    这篇文章主要为大家介绍了vue3使用Facebook嵌入式视频播放器API方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论