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

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

实现思路：

1、点击事件接听电话

在create生命周期的时候，监听电话来了的callComming这个事件，此时暂无来电的图片不显示，显示当来来电和电话号码以及接听按钮
在create生命周期的时候，还要监听电话通话的callEstablish这个事件，此时显示当来来电和电话号码以及通话中按钮，接听按钮不显示
在create生命周期的时候，还要监听电话挂断的hangUp这个事件，这里有两种情况：其一就是乘客将电话挂断了，但客服弹窗中的内容并没有填写完，此时就是显示当前来电以及电话号码但不显示任何按钮；其二就是乘客将电话挂断了，客服在弹窗的内容也填写完成了，提交填写的内容后。再次打开弹窗，如果没有来电，则显示暂无来电图片
在弹窗打开的时候，初始化init事件。需要控制暂无来电图片、接听按钮和通话中按钮的显示与否

2、keyup.enter事件

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

具体代码如下：

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

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

在template中的代码

在script中的data中的数据

在created生命周期的监听事件

在methods中写接电话的方法：

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

如转载希望注明出处哦~有写的不好的地方望多多指教

vue给div绑定keyup的enter事件实现接电话（结合阿里云软电话SDK）相关推荐

vue+el-upload组件封装（图片，文件上传至oss阿里云）
1.安装ali-oss npm install ali-oss --save 2.oss方法封装新建utils/ali-oss-upload.js文件(代码如下) const OSS = requi ...
阿里云消息队列 RocketMQ 5.0 全新升级：消息、事件、流融合处理平台
从"消息"到"消息.事件.流"的大融合消息队列作为当代应用的通信基础设施,微服务架构应用的核心依赖,通过异步解耦能力让用户更高效地构建分布式.高性能.弹性健壮 ...
python实现阿里云域名绑定动态IP
一般家庭网络的公网IP都是不固定的,而我又想通过域名来访问自己服务器上的应用,也就是说:需要通过将域名绑定到动态IP上来实现这个需求.于是乎,我开始探索实现的技术方案.通过在网上查阅一系列的资料后,发 ...
云栖发布｜阿里云消息队列 RocketMQ 5.0：消息、事件、流融合处理平台
简介:RocketMQ5.0 的发布标志着阿里云消息正式从消息领域正式迈向了"消息.事件.流"场景大融合的新局面. 引言:从"消息"到"消息.事件.流 ...
2022最新阿里云国际注册教程-不用绑定paypal注册
在阿里云国际版官网注册是需要绑定paypal或者visa卡才可以完成注册,但是很多网友表示没有这些,那么怎么解决这个问题呢?其实通过分销商来注册的话就完全不用担心这个问题了,因为可以直接省略这一步,还 ...
解决阿里云此手机号码绑定的账户数已达上限的方法
阿里云账号注册提示"此手机号码绑定的账户数已达上限,请更换",阿里云一个手机号最多绑定6个账号,这是由于该手机号绑定了多个阿里云账号,需要更换手机号或解绑原阿里云账号,阿小云分享阿 ...
搭建个人的第一个服务器以及域名申请和绑定--阿里云服务器
在大学阶段,购买并搭建了自己的第一个服务器,心情激动无比,写下本片博文记录购买并搭建服务器的全过程,方便自己以后在服务器方面进行更加深入的学习.阿里云和腾讯的服务器都有学生价,价格都是一折左右,真心实 ...
阿里云公布 “抄袭事件” 调查结果：确有员工违规
钛媒体7月21日消息,对于近日行业热议的"阿里云抄袭IPIP.NET"事件,阿里云与IPIP.NET今日对外发布联合声明. 阿里云方面表示,确有员工在该产品开发过程中存在违反公司规 ...
vue项目中上传文件到阿里云oss方法
上传背景介绍在项目需求中,关于图片.视频.文件等上传文件,一般不是直接放置在自己的后台服务器上,一般都会购买云服务进行存储.譬如阿里云的oss对象存储. 那么,前端开发项目中,涉及到上传的功能时,我 ...

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

vue给div绑定keyup的enter事件实现接电话（结合阿里云软电话SDK）相关推荐

最新文章

热门文章