vue 实现一个简单的全局调用弹窗案例

1.实现效果图

2.第一步，新建一个.vue文件 定义一个弹框的基本模板

style样式放在了文章的最底部，如果需要看效果，需要将样式放入这个vue文件里，样式是用less写的，需要你的项目引入less

注意：我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径

3.定义一个js文件

4.mian.js

import alert from '@/common/alertmodal' //这里引入的是js文件

vue.prototype.$alert = alert;

5.在任意组件调用

取消按钮开启

调用之后是往body添加元素

5.通过window.alertisshow，给window增加一个属性，来控制一个页面只会出现一个弹框

6.最后是弹框组件的less样式

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

补充知识：vue注册全局组件-弹窗组件

在src目录下新建components文件夹

1.新建module文件夹，然后新建v-alert.vue

2.在nodule同级目录新建vue-component.js

3.在main.js中注册为全局组件

import vuecomponent from "./components/vue-component";

vue.use(vuecomponent);

4.在其他组件可以直接用了,无需import

以上这篇vue 实现一个简单的全局调用弹窗案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。