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


Posted in Javascript onJuly 27, 2020

如下所示:

<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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 #Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 #Javascript
Element Rate 评分的使用方法
Jul 27 #Javascript
Element InputNumber计数器的使用方法
Jul 27 #Javascript
基于Vue中的父子传值问题解决
Jul 27 #Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 #Javascript
JS图片懒加载技术实现过程解析
Jul 27 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
angular 服务随记小结
2019/05/06 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Flask之flask-session的具体使用
2018/07/26 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
创业资金计划书
2014/02/06 职场文书
超市国庆节促销方案
2014/02/20 职场文书
党员十八大心得体会
2014/09/12 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
社区义诊通知
2015/04/24 职场文书
心灵点滴观后感
2015/06/02 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL