vue實(shí)現(xiàn)給div綁定keyup的enter事件
摘要：發(fā)現(xiàn)給div綁定keyup.enter事件是沒(méi)有效果的。那該如何實(shí)現(xiàn)呢？下面直接上代碼吧
1、在template中代碼
2、在created的生命周期中，寫一個(gè)全局的enter事件
這樣按下鍵盤中的enter事件就是有效的了
補(bǔ)充知識(shí)：
vue給div綁定keyup的enter事件實(shí)現(xiàn)接電話（結(jié)合阿里云軟電話SDK）
摘要：之前我們的接入的阿里云軟電話SDK的功能，現(xiàn)在有個(gè)新的需求就是我們自己的彈窗中添加一個(gè)按鈕可以接聽電話，同時(shí)可以按鍵盤的Enter鍵接電話。（這里的很多廢話，是為了記錄當(dāng)時(shí)想的邏輯）
實(shí)現(xiàn)思路：
1、點(diǎn)擊事件接聽電話
在create生命周期的時(shí)候，監(jiān)聽電話來(lái)了的callComming這個(gè)事件，此時(shí)暫無(wú)來(lái)電的圖片不顯示，顯示當(dāng)來(lái)來(lái)電和電話號(hào)碼以及接聽按鈕
在create生命周期的時(shí)候，還要監(jiān)聽電話通話的callEstablish這個(gè)事件，此時(shí)顯示當(dāng)來(lái)來(lái)電和電話號(hào)碼以及通話中按鈕，接聽按鈕不顯示
在create生命周期的時(shí)候，還要監(jiān)聽電話掛斷的hangUp這個(gè)事件，這里有兩種情況：其一就是乘客將電話掛斷了，但客服彈窗中的內(nèi)容并沒(méi)有填寫完，此時(shí)就是顯示當(dāng)前來(lái)電以及電話號(hào)碼但不顯示任何按鈕；其二就是乘客將電話掛斷了，客服在彈窗的內(nèi)容也填寫完成了，提交填寫的內(nèi)容后。再次打開彈窗，如果沒(méi)有來(lái)電，則顯示暫無(wú)來(lái)電圖片
在彈窗打開的時(shí)候，初始化init事件。需要控制暫無(wú)來(lái)電圖片、接聽按鈕和通話中按鈕的顯示與否
2、keyup.enter事件
實(shí)現(xiàn)思路和點(diǎn)擊事件是一樣的，唯一不同的就是需要在create生命周期中，添加全局監(jiān)聽enter事件
具體代碼如下：
1、在home.vue頁(yè)面全局使用阿里云的軟電話Sdk
2、在我的彈窗寫的代碼如下：
在template中的代碼
在script中的data中的數(shù)據(jù)
在created生命周期的監(jiān)聽事件
在methods中寫接電話的方法：
在打開彈窗的時(shí)候methods中寫初始化內(nèi)容：
以上這篇vue實(shí)現(xiàn)給div綁定keyup的enter事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+swiper實(shí)現(xiàn)時(shí)間軸效果
這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue如何通過(guò)params和query傳值(刷新不丟失)
這篇文章主要介紹了vue如何通過(guò)params和query傳值(刷新不丟失)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue路由--網(wǎng)站導(dǎo)航功能詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家介紹了LogicFlow內(nèi)置插件使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
在Vue實(shí)例中,data屬性是用戶定義的用于存儲(chǔ)數(shù)據(jù)的對(duì)象,而_data是Vue內(nèi)部用于存儲(chǔ)數(shù)據(jù)的對(duì)象,本文主要介紹了淺談vue中的data與_data的關(guān)系是什么,感興趣的可以了解一下2023-12-12
Vue路由跳轉(zhuǎn)傳參或者打開新頁(yè)面跳轉(zhuǎn)問(wèn)題
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參或者打開新頁(yè)面跳轉(zhuǎn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue3成功創(chuàng)建項(xiàng)目后?run?serve啟動(dòng)項(xiàng)目報(bào)錯(cuò)的解決
這篇文章主要介紹了vue3成功創(chuàng)建項(xiàng)目后?run?serve啟動(dòng)項(xiàng)目報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3 setup語(yǔ)法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語(yǔ)法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的相關(guān)資料,vue是單頁(yè)面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁(yè)面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下2023-10-10
vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計(jì)算方法
下面小編就為大家分享一篇vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計(jì)算方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02