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

(编辑：jimmy 日期: 2025/10/25 浏览：3 次 )

写在前面

页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，但是如果每个页面都引入这个组件，太麻烦了，所以我们将它变成全局组件，需要用的时候直接通过JS调用即可，不需要在每个页面引入了

效果图

弹窗组件

新建一个弹窗的组件——popup.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('……')
   }
  })
 }
}









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

上一篇：Vue 实现创建全局组件,并且使用Vue.use() 载入方式
下一篇：基于Vue全局组件与局部组件的区别说明