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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 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代码DOS造成用光网络带宽
2011/03/01 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
总结对比php中的多种序列化
2016/08/28 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
python图片验证码生成代码
2016/07/02 Python
Django实现发送邮件功能
2019/07/18 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
行政助理求职自荐信
2013/10/26 职场文书
《云房子》教学反思
2014/04/20 职场文书
班委竞选演讲稿
2014/04/28 职场文书
爱牙日活动总结
2014/08/29 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
公司安全管理制度范本
2015/08/05 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书