本篇内容主要讲解“vue如何实现自定义模态弹窗组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何实现自定义模态弹窗组件”吧!
一、创建弹窗组件 quitDialog.vue 组件
<template>
<transition-group name='fade'>
<!-- 退出弹窗 -->
<div class="quit_dialog"
key="1"
@click="isQuit = false"
v-if="isQuit"
@touchmove.prevent>
</div>
<div class="quit_box"
v-show="isQuit"
key="2">
<img :src="imgUrl"
:alt="imgLoadTip">
<div class="quit_title">{{title}}</div>
<p>{{content}}</p>
<button class="quit_btn" @click="leftClick">{{btnText}}</button>
<button class="quit_close" @click="rightClick">{{rightText}}</button>
</div>
</transition-group>
</template>
<script>
export default {
name: 'Popup',
data （） {
return {
isQuit: false,
imgUrl: '',
title: '',
content: '',
btnText: '',
rightText: ''
}
},
methods: {
leftClick （） {
this.leftBtn（）
this.isQuit = false
},
rightClick （） {
this.rightBtn（）
this.isQuit = false
}
}
}
</script>
<style lang="scss" scoped>
// 退出弹窗
.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;
height: 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 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.27）;
border: 1px solid #03BA82;
color: #fff;
}
}
</style>
二、创建 graspDialog.js
import Vue from 'vue'
import Grasp from '/components/QuitDialog/QuitDialog'
const PopupBox = Vue.extend（Grasp）
Grasp.install = function （data） {
let instance = new PopupBox（{
data
}）。$mount（）
document.body.appendChild（instance.$el）
Vue.nextTick（（） => {
instance.isQuit = true
// isQuit 和弹窗组件里的isQuit对应，用于控制显隐
}）
}
export default Grasp
三、在全局 main.js 引入
import Vue from 'vue'
import Popup from './api/quitDialog'
Vue.prototype.$popup = Popup.install
四、页面中调用，只需在函数中调用即可
methods: {
graspBtn （） {
this.$grasp（{
imgUrl: require（'//assets/home/quits.png'）， // 顶部图片。
imgLoadTip: '图片加载中…',
content: '温馨提示',
title: '注意：该学习任务未完成，是否确认退出',
btnText: '残忍退出',
rightText: '继续学习',
// 左边点击事件
leftBtn: （） => {
this.$store.dispatch（'user/logout'）。then（（） => {
this.$signalr.LogoutPad（）
this.$signalr.SendMsg（2, 0, '退出系统'）
this.$router.push（'/login'）
}）
},
// 右边点击事件
rightBtn: （） => {}
}）
}
}
到此，相信大家对“vue如何实现自定义模态弹窗组件”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
