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