vue實(shí)現(xiàn)給div綁定keyup的enter事件
摘要：發(fā)現(xiàn)給div綁定keyup.enter事件是沒有效果的。那該如何實(shí)現(xiàn)呢？下面直接上代碼吧
1、在template中代碼
2、在created的生命周期中，寫一個全局的enter事件
這樣按下鍵盤中的enter事件就是有效的了
補(bǔ)充知識：
vue給div綁定keyup的enter事件實(shí)現(xiàn)接電話（結(jié)合阿里云軟電話SDK）
摘要：之前我們的接入的阿里云軟電話SDK的功能，現(xiàn)在有個新的需求就是我們自己的彈窗中添加一個按鈕可以接聽電話，同時(shí)可以按鍵盤的Enter鍵接電話。（這里的很多廢話，是為了記錄當(dāng)時(shí)想的邏輯）
實(shí)現(xiàn)思路：
1、點(diǎn)擊事件接聽電話
在create生命周期的時(shí)候，監(jiān)聽電話來了的callComming這個事件，此時(shí)暫無來電的圖片不顯示，顯示當(dāng)來來電和電話號碼以及接聽按鈕
在create生命周期的時(shí)候，還要監(jiān)聽電話通話的callEstablish這個事件，此時(shí)顯示當(dāng)來來電和電話號碼以及通話中按鈕，接聽按鈕不顯示
在create生命周期的時(shí)候，還要監(jiān)聽電話掛斷的hangUp這個事件，這里有兩種情況：其一就是乘客將電話掛斷了，但客服彈窗中的內(nèi)容并沒有填寫完，此時(shí)就是顯示當(dāng)前來電以及電話號碼但不顯示任何按鈕；其二就是乘客將電話掛斷了，客服在彈窗的內(nèi)容也填寫完成了，提交填寫的內(nèi)容后。再次打開彈窗，如果沒有來電，則顯示暫無來電圖片
在彈窗打開的時(shí)候，初始化init事件。需要控制暫無來電圖片、接聽按鈕和通話中按鈕的顯示與否
2、keyup.enter事件
實(shí)現(xiàn)思路和點(diǎn)擊事件是一樣的，唯一不同的就是需要在create生命周期中，添加全局監(jiān)聽enter事件
具體代碼如下：
1、在home.vue頁面全局使用阿里云的軟電話Sdk
2、在我的彈窗寫的代碼如下：
在template中的代碼
在script中的data中的數(shù)據(jù)
在created生命周期的監(jiān)聽事件
在methods中寫接電話的方法：
在打開彈窗的時(shí)候methods中寫初始化內(nèi)容：
以上這篇vue實(shí)現(xiàn)給div綁定keyup的enter事件就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli3添加模式配置多環(huán)境變量的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達(dá)數(shù)據(jù)的動態(tài)響應(yīng)，有興趣的可以了解一下2017-07-07
vue循環(huán)el-button實(shí)現(xiàn)點(diǎn)擊哪個按鈕,那個按鈕就變色
這篇文章主要介紹了vue循環(huán)el-button實(shí)現(xiàn)點(diǎn)擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3內(nèi)置組件Teleport使用方法，Teleport是Vue 3.0 新增的一個內(nèi)置組件，主要是為了解決一些特殊場景下模態(tài)對話框組件、組件的渲染，帶著些許的了解一起走進(jìn)下面文章的詳細(xì)內(nèi)容吧2021-10-10
Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
在開發(fā)項(xiàng)目的時(shí)候，我們一般都用 vue-cli 來避免繁瑣的 webpack 配置和 template 配置。這篇文章主要介紹了如何寫一個 vue 插件,需要的朋友可以參考下2019-06-06
vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼
今天小編就為大家分享一篇vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
編程式路由在我們的項(xiàng)目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件全過程(WEB)
寫頁面的時(shí)候都會用到一些導(dǎo)航欄、點(diǎn)擊不同的部分切換不同的頁面,下面這篇文章主要給大家介紹了關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue2的時(shí)候使用的是字體圖標(biāo),缺點(diǎn)就是比較單一,到了vue3,相信瀏覽器的性能起來,所以這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue3+vite2中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08