摘要：發(fā)現(xiàn)給div綁定keyup.enter事件是沒(méi)有效果的。那該如何實(shí)現(xiàn)呢？下面直接上代碼吧

1、在template中代碼

2、在created的生命周期中，寫(xiě)一個(gè)全局的enter事件

這樣按下鍵盤(pán)中的enter事件就是有效的了

補(bǔ)充知識(shí)：

vue給div綁定keyup的enter事件實(shí)現(xiàn)接電話(huà)（結(jié)合阿里云軟電話(huà)SDK）

摘要：之前我們的接入的阿里云軟電話(huà)SDK的功能，現(xiàn)在有個(gè)新的需求就是我們自己的彈窗中添加一個(gè)按鈕可以接聽(tīng)電話(huà)，同時(shí)可以按鍵盤(pán)的Enter鍵接電話(huà)。（這里的很多廢話(huà)，是為了記錄當(dāng)時(shí)想的邏輯）

實(shí)現(xiàn)思路：

1、點(diǎn)擊事件接聽(tīng)電話(huà)

在create生命周期的時(shí)候，監(jiān)聽(tīng)電話(huà)來(lái)了的callComming這個(gè)事件，此時(shí)暫無(wú)來(lái)電的圖片不顯示，顯示當(dāng)來(lái)來(lái)電和電話(huà)號(hào)碼以及接聽(tīng)按鈕

在create生命周期的時(shí)候，還要監(jiān)聽(tīng)電話(huà)通話(huà)的callEstablish這個(gè)事件，此時(shí)顯示當(dāng)來(lái)來(lái)電和電話(huà)號(hào)碼以及通話(huà)中按鈕，接聽(tīng)按鈕不顯示

在create生命周期的時(shí)候，還要監(jiān)聽(tīng)電話(huà)掛斷的hangUp這個(gè)事件，這里有兩種情況：其一就是乘客將電話(huà)掛斷了，但客服彈窗中的內(nèi)容并沒(méi)有填寫(xiě)完，此時(shí)就是顯示當(dāng)前來(lái)電以及電話(huà)號(hào)碼但不顯示任何按鈕；其二就是乘客將電話(huà)掛斷了，客服在彈窗的內(nèi)容也填寫(xiě)完成了，提交填寫(xiě)的內(nèi)容后。再次打開(kāi)彈窗，如果沒(méi)有來(lái)電，則顯示暫無(wú)來(lái)電圖片

在彈窗打開(kāi)的時(shí)候，初始化init事件。需要控制暫無(wú)來(lái)電圖片、接聽(tīng)按鈕和通話(huà)中按鈕的顯示與否

2、keyup.enter事件

實(shí)現(xiàn)思路和點(diǎn)擊事件是一樣的，唯一不同的就是需要在create生命周期中，添加全局監(jiān)聽(tīng)enter事件

具體代碼如下：

1、在home.vue頁(yè)面全局使用阿里云的軟電話(huà)Sdk

2、在我的彈窗寫(xiě)的代碼如下：

在template中的代碼

在script中的data中的數(shù)據(jù)

在created生命周期的監(jiān)聽(tīng)事件

在methods中寫(xiě)接電話(huà)的方法：

在打開(kāi)彈窗的時(shí)候methods中寫(xiě)初始化內(nèi)容：

以上這篇vue實(shí)現(xiàn)給div綁定keyup的enter事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。