vue实现给div绑定keyup的enter事件


Posted in Javascript onJuly 31, 2020

摘要:发现给div绑定keyup.enter事件是没有效果的。那该如何实现呢?下面直接上代码吧

1、在template中代码

vue实现给div绑定keyup的enter事件

2、在created的生命周期中,写一个全局的enter事件

vue实现给div绑定keyup的enter事件

这样按下键盘中的enter事件就是有效的了

补充知识:

vue给div绑定keyup的enter事件实现接电话(结合阿里云软电话SDK)

摘要:之前我们的接入的阿里云软电话SDK的功能,现在有个新的需求就是我们自己的弹窗中添加一个按钮可以接听电话,同时可以按键盘的Enter键接电话。(这里的很多废话,是为了记录当时想的逻辑)

实现思路:

1、点击事件接听电话

vue实现给div绑定keyup的enter事件

在create生命周期的时候,监听电话来了的callComming这个事件,此时暂无来电的图片不显示,显示当来来电和电话号码以及接听按钮

在create生命周期的时候,还要监听电话通话的callEstablish这个事件,此时显示当来来电和电话号码以及通话中按钮,接听按钮不显示

在create生命周期的时候,还要监听电话挂断的hangUp这个事件,这里有两种情况:其一就是乘客将电话挂断了,但客服弹窗中的内容并没有填写完,此时就是显示当前来电以及电话号码但不显示任何按钮;其二就是乘客将电话挂断了,客服在弹窗的内容也填写完成了,提交填写的内容后。再次打开弹窗,如果没有来电,则显示暂无来电图片

在弹窗打开的时候,初始化init事件。需要控制暂无来电图片、接听按钮和通话中按钮的显示与否

2、keyup.enter事件

实现思路和点击事件是一样的,唯一不同的就是需要在create生命周期中,添加全局监听enter事件

具体代码如下:

1、在home.vue页面全局使用阿里云的软电话Sdk

2、在我的弹窗写的代码如下:

在template中的代码

vue实现给div绑定keyup的enter事件

在script中的data中的数据

vue实现给div绑定keyup的enter事件

在created生命周期的监听事件

vue实现给div绑定keyup的enter事件

在methods中写接电话的方法:

vue实现给div绑定keyup的enter事件

在打开弹窗的时候methods中写初始化内容:

vue实现给div绑定keyup的enter事件

以上这篇vue实现给div绑定keyup的enter事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
JS实现轮播图效果
Jan 11 Javascript
简单了解JavaScript作用域
Jul 31 #Javascript
基于vue--key值的特殊用处详解
Jul 31 #Javascript
javascript开发实现贪吃蛇游戏
Jul 31 #Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 #Javascript
vscode中Vue别名路径提示的实现
Jul 31 #Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 #Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 #Javascript
You might like
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
js计数器代码
2006/11/04 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JavaScript类库D
2010/10/24 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
Webpack path与publicPath的区别详解
2018/05/03 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
班级聚会策划书
2014/01/16 职场文书
大学社团活动策划书
2014/01/26 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
法院信息化建设方案
2014/05/21 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
会计专业求职信
2014/08/10 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
python实现简单区块链结构
2021/04/25 Python