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中window.confirm的行为
Oct 21 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
微信小程序实现弹框效果
May 26 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 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python实现微信自动回复功能
2018/04/11 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
普罗米修斯教学反思
2014/02/06 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS