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 相关文章推荐
javascript事件问题
Sep 05 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
js实现按座位号抽奖
Apr 05 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python基本语法练习实例
2017/09/19 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python解析yaml文件过程详解
2019/08/30 Python
np.dot()函数的用法详解
2020/01/17 Python
django使用channels实现通信的示例
2020/10/19 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
拉拉队口号
2014/06/16 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
个人融资协议书
2014/10/02 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
Python中super().__init__()测试以及理解
2021/12/06 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android