vue寫一個全局彈窗組件通過js調(diào)用的方法
更新時間：2024年06月20日 15:09:40 作者：hjj2019
彈窗效果是在Web開發(fā)中經(jīng)常用到的一種交互效果,它可以在用戶點擊某個按鈕或者觸發(fā)某個事件時顯示一個懸浮框,提供用戶與頁面進行交互的機會,這篇文章主要給大家介紹了關(guān)于vue寫一個全局彈窗組件通過js調(diào)用的方法,需要的朋友可以參考下
前言
實際開發(fā)中有很多彈出通用窗口的場景，而并非路由跳轉(zhuǎn)。比如打開百度的”文心一言“，當你沒有登錄時就會彈出登錄窗口，而并非跳到登錄頁。
一、上代碼
1 .先把彈窗封裝成一個vue組件
寫一個vue組件 里面只有一個dialog
2、使用
在需要使用的地方導入剛才寫的彈窗組件
使用以下這段js代碼 把彈窗添加到頁面中 就可實現(xiàn)效果
const constructor =Vue.extend(login);
const instance = new constructor();
instance.$mount();
document.body.appendChild(instance.$el);
二、效果圖
總結(jié)
到此這篇關(guān)于vue寫一個全局彈窗組件通過js調(diào)用的文章就介紹到這了,更多相關(guān)vue全局彈窗組件js調(diào)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue項目如何刷新當前頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue中的循環(huán)及修改差值表達式的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)動態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
一個Java程序猿眼中的前后端分離以及Vue.js入門(推薦)
這篇文章主要介紹了前后端分離及Vue.js入門，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue.delete()刪除對象的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+element-ui?校驗開始時間與結(jié)束時間的實現(xiàn)代碼
這篇文章主要介紹了vue+element-ui?校驗開始時間與結(jié)束時間的代碼實現(xiàn),最主要的需求是開始時間不能早于當前時間,感興趣的朋友跟隨小編一起看看吧2024-07-07
elementUI中el-upload文件上傳的實現(xiàn)方法
ElementUI的組件支持多種事件鉤子,如http-request、before-upload和on-change,以實現(xiàn)自定義文件上傳處理,這篇文章主要介紹了elementUI中el-upload文件上傳的實現(xiàn)方法,需要的朋友可以參考下2024-11-11
Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題
這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
在Vue的模板語法中,我們學了很多指令,當然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來和大家聊聊如何使用自定義指令吧2023-10-10
Vue如何使用patch-package優(yōu)雅地修改第三方依賴庫
在前端開發(fā)中,有時我們需要對第三方依賴庫進行修改以滿足項目需求,patch-package 是一個優(yōu)秀的工具,可以幫助我們優(yōu)雅地管理這些修改,下面我們來看看具體操作吧2025-03-03