vue如何实现自定义模态弹窗组件

本篇内容主要讲解"vue如何实现自定义模态弹窗组件"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue如何实现自定义模态弹窗组件"吧!

一、创建弹窗组件 quitDialog.vue 组件

二、创建 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如何实现自定义模态弹窗组件"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！