一、效果图
二、背景
由于微信小程序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" @click="confirm">{
{
customShowModal.confirmText }}</view>
</view>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
computed: {
...mapState(["customShowModal"])
},
methods: {
show() {
this.$store.commit("setCustomShowModal", {
visible: true
});
},
hide() {
this.$store.commit("setCustomShowModal", {
visible: false
});
},
cancel() {
this.customShowModal.cancelCallback();
this.hide();
},
confirm() {
this.customShowModal.sureCallback();
this.hide();
}
}
}
</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 {
width: 90%;
background-color: #ffffff;
border-radius: 15px;
overflow: hidden;
}
.modal-header {
padding: 20px 15px 9px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #000000;
}
.modal-body {
padding: 10px 15px;
text-align: center;
font-size: 16px;
color: #989292;
}
.modal-footer {
display: flex;
justify-content: center;
border-top: 1px solid #e5e5e5;
}
.button_view {
flex: 1;
padding: 20px 0;
font-size: 16px;
border: none;
outline: none;
width:50%;
background: #ffffff;
text-align: center
}
.cancel-btn {
color: #000000;
border-right: 1px solid #e5e5e5;
}
.confirm-btn {
color: #576B95;
}
</style>
4、将组件引入到全局注册 也就是main.js
import showModal from '@/components/show-modal/index.vue';
Vue.component('showModal', showModal)
5、在pages.json文件中配置 insetLoader
//在pages.json文件中新加insetLoader属性
"insetLoader": {
//配置
"config": {
//将需要引入的组件名起了个confirm的名字在下面label中使用
//右侧"<test ref='confirm' />"为需要插入的组件标签
"showModal": "<show-modal ref='showModal' />"
},
// 全局配置
//需要挂在的组件名
"label": ["showModal"],
//根元素的标签类型 也就是插入到页面哪个根元素下默认为div 但是uniapp中需要写为view
"rootEle": "view"
},
6、运行项目的时候就会在每个页面插入show-modal组件
6、我们用vuex控制自定义showModal的状态，
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
customShowModal: {
visible: false,
title: '提示',
content: '',
showCancel: false,
confirmText: "确定",
cancelText: "取消",
sureCallback:()=>{
},
cancelCallback:()=>{
}
},//自定义showModal对象
mutations:{
setCustomShowModal:(state, customShowModal) {
let defaultOption = {
visible: false,
title: '提示',
content: '',
showCancel: false,
confirmText: "确定",
cancelText: "取消",
sureCallback:()=>{
},
cancelCallback:()=>{
}
}
state.customShowModal = {
...defaultOption,
...customShowModal
};
if(customShowModal.visible){
uni.hideTabBar()
}else{
uni.showTabBar();
}
},
}
}
})
7、在js中的调用
import vm from "@/main.js"
vm.$store.commit("setCustomShowModal", {
content:"您的车联网服务即将到期，请前往【我的】->【服务订阅】进行订阅",
visible: true,
showCancel: true,
sureCallback: () => {
console.log('我点击了确定')
},
cancelCallback: () => {
console.log("我点击了取消");
}
});