Vue自定义全局弹窗组件操作

<template>
 <transition name='fade'>
  <!-- 蒙版 -->
  <div class="mask" v-if="show" @touchmove.prevent>
   <div class="window">
    <img class="shadow" :src="/UploadFiles/2021-04-02/imgUrl">

popup.js文件
新建一个popup.js文件，写方法


import Vue from 'vue'
import Popup from './popup.vue'
const PopupBox = Vue.extend(Popup)

Popup.install = function (data) {
 let instance = new PopupBox({
  data
 }).$mount()

 document.body.appendChild(instance.$el)

 Vue.nextTick(() => {
  instance.show = true
  // show 和弹窗组件里的show对应，用于控制显隐
 })
}
export default Popup













main.js引入popup.js



// 自定义全局弹窗组件
import Vue from 'vue'
import Popup from './components/dialog/popup'
Vue.prototype.$popup = Popup.install




组件中使用方法


methods: {
 btnClick () {
  this.$popup({
   imgUrl: require('../../../static/images/shadow.png'), // 顶部图片
   title: '我是标题',
   content: '我是内容',
   btnText: '我是按钮',
   click: () => {
    // 点击按钮事件
    this.$router.push('……')
   }
  })
 }
}









方便以后自己使用，大家也可以参考哦，也希望大家多多支持，谢谢~~