vue全局弹窗

最新推荐文章于 2024-08-27 15:06:06 发布

寒冰射手杨百亿

最新推荐文章于 2024-08-27 15:06:06 发布

阅读量3.1k

点赞数 2

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ybyshezhang/article/details/122661778

版权

本文介绍了如何在Vue3中创建一个全局弹窗组件，该弹窗具备简单的样式，包括左右两个操作按钮，用于确认或取消，并且支持传递参数。通过`this.$pop()`的方式进行调用，类似于uni-app中的使用体验。

摘要由CSDN通过智能技术生成

在vue3中使用全局弹窗样式比较简单一左一右两个按钮确认取消支持传参用this.$pop()这样的形式调用就像uni中的一样
在这里插入图片描述

建一个工具js

import PopTemplate from '../plugins/pop/Template'
import {
   createApp} from 'vue'

export default{
   
	install: (app) => {
   
		// 弹窗 
        app.config.globalProperties.$pop = function (content, options) {
   
            // 默认配置
            var defaultConfig = {
   
                // 标题
                title: "",
                // 左侧按钮信息
                left: {
   
                    // 是否显示
                    show: true,
                    // 内容
                    text: '取消',
                    // 回调
                    callback: null
                },
                // 右侧按钮信息
                right: {
   
                    // 是否显示
                    show: true,
                    // 内容
                    text: '确认',
                    // 回调
                    callback: null
                },
                // 传参
                params: {
   

                }
            }
            if (typeof options != "undefined") {
   
                options.left = Object.assign(defaultConfig.left, options.left)
                options.right = Object.assign(defaultConfig.right, options.right)
            }
            const mountNode = document.createElement('div')
            document.body.appendChild(mountNode)
            var config = Object.assign(defaultConfig, options)
            var pop = createApp(PopTemplate)
            pop.mixin({
   
                data() {
   
                    return {
   
                        content: content,
                        title: config.title,
                        left: config.left,
                        right: config.right,
                        params: config.params
                    }
                },
                methods: {