uniapp开发小程序实现全局弹窗,可在js中调用

一、效果图

二、背景

由于微信小程序API showModal 无法自定义样式，我们小程序的整体风格偏黑，所以不得不修改样式，但是我们的请求都进行了拦截，在拦截处弹出错误提示，在js中进行了showModal 的调用

三、实现步骤

1、安装插件vue-inset-loader

npm i vue-inset-loader

2、创建vue.config.js 文件

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

3、创建全局组件

<template>
	<view class="modal" v-if="customShowModal.visible">
		<view class="modal-content">
			<view class="modal-header">
				<text>{
   
   {
   
    customShowModal.title }}</text>
			</view>
			<view class="modal-body">
				<text>{
   
   {
   
    customShowModal.content }}</text>
			</view>
			<view class="modal-footer">
				<view class="button_view cancel-btn " v-if="customShowModal.showCancel" @click="cancel">{
   
   {
   
    customShowModal.cancelText }}</view>
				<view class="button_view confirm-btn"