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

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

這樣按下鍵盤中的enter事件就是有效的了
補(bǔ)充知識(shí):
vue給div綁定keyup的enter事件實(shí)現(xiàn)接電話(結(jié)合阿里云軟電話SDK)
摘要:之前我們的接入的阿里云軟電話SDK的功能,現(xiàn)在有個(gè)新的需求就是我們自己的彈窗中添加一個(gè)按鈕可以接聽(tīng)電話,同時(shí)可以按鍵盤的Enter鍵接電話。(這里的很多廢話,是為了記錄當(dāng)時(shí)想的邏輯)
實(shí)現(xiàn)思路:
1、點(diǎn)擊事件接聽(tīng)電話

在create生命周期的時(shí)候,監(jiān)聽(tīng)電話來(lái)了的callComming這個(gè)事件,此時(shí)暫無(wú)來(lái)電的圖片不顯示,顯示當(dāng)來(lái)來(lái)電和電話號(hào)碼以及接聽(tīng)按鈕
在create生命周期的時(shí)候,還要監(jiān)聽(tīng)電話通話的callEstablish這個(gè)事件,此時(shí)顯示當(dāng)來(lái)來(lái)電和電話號(hào)碼以及通話中按鈕,接聽(tīng)按鈕不顯示
在create生命周期的時(shí)候,還要監(jiān)聽(tīng)電話掛斷的hangUp這個(gè)事件,這里有兩種情況:其一就是乘客將電話掛斷了,但客服彈窗中的內(nèi)容并沒(méi)有填寫(xiě)完,此時(shí)就是顯示當(dāng)前來(lái)電以及電話號(hào)碼但不顯示任何按鈕;其二就是乘客將電話掛斷了,客服在彈窗的內(nèi)容也填寫(xiě)完成了,提交填寫(xiě)的內(nèi)容后。再次打開(kāi)彈窗,如果沒(méi)有來(lái)電,則顯示暫無(wú)來(lái)電圖片
在彈窗打開(kāi)的時(shí)候,初始化init事件。需要控制暫無(wú)來(lái)電圖片、接聽(tīng)按鈕和通話中按鈕的顯示與否
2、keyup.enter事件
實(shí)現(xiàn)思路和點(diǎn)擊事件是一樣的,唯一不同的就是需要在create生命周期中,添加全局監(jiān)聽(tīng)enter事件
具體代碼如下:
1、在home.vue頁(yè)面全局使用阿里云的軟電話Sdk
2、在我的彈窗寫(xiě)的代碼如下:
在template中的代碼

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

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

在methods中寫(xiě)接電話的方法:

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

以上這篇vue實(shí)現(xiàn)給div綁定keyup的enter事件就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. idea設(shè)置提示不區(qū)分大小寫(xiě)的方法2. 使用AJAX(包含正則表達(dá)式)驗(yàn)證用戶登錄的步驟3. Java PreparedStatement用法詳解4. Java實(shí)現(xiàn)的迷宮游戲5. django queryset相加和篩選教程6. IDEA 2020.1.2 安裝教程附破解教程詳解7. Java利用TCP協(xié)議實(shí)現(xiàn)客戶端與服務(wù)器通信(附通信源碼)8. JS圖片懶加載庫(kù)VueLazyLoad詳解9. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算10. Spring如何集成ibatis項(xiàng)目并實(shí)現(xiàn)dao層基類封裝

網(wǎng)公網(wǎng)安備