vue实现给div绑定keyup的enter事件
摘要：发现给div绑定keyup.enter事件是没有效果的。那该如何实现呢？下面直接上代码吧
1、在template中代码
2、在created的生命周期中，写一个全局的enter事件
这样按下键盘中的enter事件就是有效的了
补充知识：
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事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli3添加模式配置多环境变量的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
本篇文章主要介绍了Vue 2.0的数据依赖实现原理代码简析，主要从初始化的数据层面上分析了Vue是如何管理依赖来到达数据的动态响应，有兴趣的可以了解一下2017-07-07
vue循环el-button实现点击哪个按钮,那个按钮就变色
这篇文章主要介绍了vue循环el-button实现点击哪个按钮,那个按钮就变色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue3内置组件Teleport使用方法，Teleport是Vue 3.0 新增的一个内置组件，主要是为了解决一些特殊场景下模态对话框组件、组件的渲染，带着些许的了解一起走进下面文章的详细内容吧2021-10-10
Vue2.0利用vue-resource上传文件到七牛的实例代码
本篇文章主要介绍了Vue2.0利用vue-resource上传文件到七牛的实例代码，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
在开发项目的时候，我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。这篇文章主要介绍了如何写一个 vue 插件,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇vue组件表单数据回显验证及提交的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
编程式路由在我们的项目使用过程中最常用的的方法了。这篇文章主要介绍了讲解vue-router之什么是编程式路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面,下面这篇文章主要给大家介绍了关于Vue3点击侧边导航栏完成切换页面内组件的相关资料,需要的朋友可以参考下2023-06-06
vue2的时候使用的是字体图标,缺点就是比较单一,到了vue3,相信浏览器的性能起来,所以这里记录一下,下面这篇文章主要给大家介绍了关于vue3+vite2中使用svg的相关资料,需要的朋友可以参考下2022-08-08
最新评论