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 特殊字符串
Feb 25 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
公司成本主管岗位责任制
2014/02/21 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
宣传活动总结范文
2014/07/01 职场文书
企业挂职心得体会
2014/09/10 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
入党群众意见范文
2015/06/02 职场文书
成人成长感言如何写?
2019/08/16 职场文书