2024-11-17 uniapp小程序之自定义 · 全局弹窗

效果图：

目录结构：

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

npm i vue-inset-loader

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

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

<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>

 二：新建store/index.js

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;

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

三：在main.js中引入

import App from "./App";

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();

四：配置pages.json

{
    "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": {}
}

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

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

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

"rootEle": ".*"

五：配置vue.config.js

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>

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

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