2025-02-10 uniapp小程序全局弹窗解决方案

效果图：

image.png

目录结构：

image.png

共需要修改6个地方，开始前请安装一个依赖：vue-inset-loader

npm i vue-inset-loader

vue-inset-loader的GitHub地址：https://github.com/1977474741/vue-inset-loader

一：新建弹窗文件components/golbalModa.vue

image.png

<template>
  <view class="modal" v-if="globalModal.visible">
    <view class="modal-content"> 全局弹窗 </view>
  </view>
</template>

<script> import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["globalModal"]),
  },
  methods: {},
}; </script>

<style scoped> .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  background-color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  padding: 20px;
} </style>

image.png

二：新建store/index.js

[[图片上传失败...(image-23059f-1739168769993)]](javascript:void(0); "复制代码")

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    globalModal: {
      visible: false,
    },
  },
  mutations: {
    setModal: (state, data) => {
      state.globalModal = data;
    },
  },
});

export default store;

[[图片上传失败...(image-60aff2-1739168769993)]](javascript:void(0); "复制代码")

image.png

如果你已经建了store，则在里面进行添加就行了，这里则不赘述。

三：在main.js中引入

[[图片上传失败...(image-e83363-1739168769993)]](javascript:void(0); "复制代码")

import Vue from "vue";
import "./uni.promisify.adaptor";
import store from "@/store";
import globalModal from "@/components/globalModal";
Vue.component("globalModal", globalModal);

Vue.config.productionTip = false;
App.mpType = "app";
const app = new Vue({
  ...App,
  store,
});
app.$mount();

[[图片上传失败...(image-6fdd0-1739168769993)]](javascript:void(0); "复制代码")

image.png

四：配置pages.json

[[图片上传失败...(image-1788ef-1739168769993)]](javascript:void(0); "复制代码")

{ "insetLoader": { "config": { "confirm": "<globalModal ref='globalModal' />" }, "label": [ "confirm" ], "rootEle": "view" }, "pages": [
        { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" }
        }
    ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "uniIdRouter": {}
}

[[图片上传失败...(image-6984f3-1739168769993)]](javascript:void(0); "复制代码")

image.png

注意：这里是重点，只要关心insetLoader这个对象就行了，如果你上下步骤都弄好了，而且项目也重启了好几次还是没有显示弹窗，注意你显示弹窗的页面是用了div作为根元素还是view，如果是div，那么"rootEle": "view"要更改为"rootEle": "div"，这很重要！！！

如果你"rootEle": "view"配置对了，还是没有在对应的页面打开，那么请检查你那个页面的根元素是否绑定v-if之类的条件判断渲染，我项目的首页就是这样，明明我在测试项目建的弹窗能正常显示，搬运过去就无法显示了，死活都不显示，搞了我好半天才发现是这么问题，一开始时它的确出现了，然后立马就自动消失了，是因为条件判断渲染把它给覆盖掉了。

注意！！！如果你的代码中的根元素有的是div，有的又是view，那么！请你把rootEle设置为.*！！也就是👇

"rootEle": ".*"

五：配置vue.config.js

[[图片上传失败...(image-bcc6d8-1739168769993)]](javascript:void(0); "复制代码")

const path = require("path");
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: {
            loader: path.resolve(__dirname, "./node_modules/vue-inset-loader"),
          },
        },
      ],
    },
  },
};

六：在App.vue(或任意.vue文件引用)

<script> export default {
  onLaunch: function () { this.$store.commit("setModal", {
      visible: true,
    });
  },
}; </script>

image.png

完成以上步骤后请记得一定！一定！！一定！！！要重启项目！！！！否者不会生效！！！！

我已将上面代码上传到了gitee，传送门：https://gitee.com/iuniko/global-modal.git

https://www.cnblogs.com/iuniko/p/18551393

https://blog.csdn.net/weixin_40466351/article/details/140773872