1、vue 實現自定義 “模態彈窗“ 組件一、創建彈窗組件 quitdialog.vue 組件 title content btntext righttext export default name: &39;popup&39;, data （） return isquit: false, imgurl: &39;&39;, title: &39;&39;, content: &39;&39;, btntext: &39;&39;, righttext: &39;&39; , methods: left

2、click （） this.leftbtn（） this.isquit = false , rightclick （） this.rightbtn（） this.isquit = false / 退出彈窗 .fade-enter, .fade-leave-active opacity: 0; .fade-enter-active, .fade-leave-active transition: opacity 0.35s; / 全局彈窗 .quit_dialog background: rgba（0,0,0,.5）; position: fixed; top: 0; left: 0; heigh

3、t: 100%; width: 100%; z-index: 10000; .quit_box width: 700px; background: fff; position: fixed; top: 50%; left: 50%; margin-left: -350px; margin-top: -190px; z-index: 10001; border-radius: 10px; text-align: center; padding: 50px; img width: 80px; .quit_title color: 666; font-size: 28px; margin: 45px

4、 0px; button border-radius: 32px; padding:20px 0px; font-size: 26px; border-radius: 8px; width: 214px; .quit_btn color: 03ba82; background: fff; border: 1px solid 03ba82; margin-right: 32px; .quit_close background: linear-gradient（0deg, 03ba82, 01d695）; box-shadow: 0px 3px 4px 0px rgba（1, 84, 58, 0.

5、27）; border: 1px solid 03ba82; color: fff; 二、創建 graspdialog.js import vue from &39;vue&39; import grasp from &39;/components/quitdialog/quitdialog&39; const popupbox = vue.extend（grasp） grasp.install = function （data） let instance = new popupbox（ data ）。$mount（） document.body.appendc

6、hild（instance.$el） vue.nexttick（） => instance.isquit = true / isquit 和彈窗組件里的isquit對應，用于控制顯隱 ） export default grasp 三、在全局 main.js 引入 import vue from &39;vue&39; import popup from &39;./api/quitdialog&39; vtotype.$popup = popup.install 四、頁面中調用，只需在函數中調用即可 methods: graspbtn （） t

7、his.$grasp（ imgurl: require（&39;/assets/home/quits.png&39;）， / 頂部。 imgloadtip: &39;加載中&39;, content: &39;溫馨提醒&39;, title: &39;注重：該學習任務未完成，是否確認退出&39;, btntext: &39;殘忍退出&39;, righttext: &39;繼續學習&39;, / 左邊點擊大事 leftbtn: （） => this.$store.dispatch（&39;user/logout&39;）。then（） => this.$signalr.logoutpad（） this.$signalr.sendmsg（2,