(编辑:jimmy 日期: 2024/12/25 浏览:2)
写在前面
页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过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 Popupmain.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('……') } }) } }方便以后自己使用,大家也可以参考哦,也希望大家多多支持,谢谢~~