uniapp自定义弹窗之随时更换弹窗背景的实现

本文章是基于 uniapp实现自定义弹窗组件，可以在app全局任意地方使用这篇文章的续篇。
如果想要随时更换弹窗的背景图，需要做以下的改动：
1.show-modal.vue

<template>
	<!-- 自定义弹窗 -->
	<view class="_showModal" v-show="show">
			<view class="_shade"></view>
			<view class="_modalBox">
				<view class="_modal" :style="{backgroundImage:backgroundImage}">
					<slot name="title">
						<view class="title" v-show="title">{{title}}</view>
					</slot>
					<slot name="content">
						<view class="content">{{content}}</view>
					</slot>
					<slot name="btn">
						<view class="btnbox">
							<view v-if="cancelText" class="btn" :style="{color:cancelColor,background:cancelBackgroundColor}" @click.stop="clickBtn('cancel')">{{cancelText}}</view>
							<view class="btn" :style="{color:confirmColor,background:confirmBackgroundColor}" @click.stop="clickBtn('confirm')">{{confirmText}}</view>
						</view>
					</slot>
					<!-- <view class="image">
						
					</view> -->
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		name:"show-modal",
		computed: {
				show(){
					return this.$modalStore.state.show;
				},
				title(){
					return this.$modalStore.state.title;
				},
				content(){
					return this.$modalStore.state.content;
				},
				showCancel(){
					return this.$modalStore.state.showCancel;
				},
				cancelText(){
					return this.$modalStore.state.cancelText;
				},
				cancelColor(){
					return this.$modalStore.state.cancelColor;
				},
				cancelBackgroundColor(){
					return this.$modalStore.state.cancelBackgroundColor;
				},
				confirmText(){
					return this.$modalStore.state.confirmText;
				},
				confirmColor(){
					return this.$modalStore.state.confirmColor;
				},
				confirmBackgroundColor(){
					return this.$modalStore.state.confirmBackgroundColor;
				},
				backgroundImage(){
					return this.$modalStore.state.backgroundImage;
				}
				
		},
		methods:{
			
			closeModal(){
				this.$modalStore.commit('hideModal')
			},
			clickBtn(res){
				this.$modalStore.commit('hideModal')
				this.$modalStore.commit('success',res)
			}
		},
		beforeDestroy(){
			this.$modalStore.commit('hideModal')
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
._showModal{
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index:10000;
		._shade{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #000;
			opacity: .6;
			z-index:11000;
		}
		._modalBox{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index:12000;
			display: flex;
			justify-content: center;
			align-items: center;
			._modal{
				position: relative;
				flex: none;
				width:345px;
				min-height:256px;
				background: #fff;
				border-radius: 12px;
				background-size: 345px 100%;
				.title{
					text-align: center;
					font-size: 20px;
					font-family: Source Han Sans CN;
					// font-weight: bold;
					color: #000000;
					margin-top: 20px;
				}
				.content{
					min-height: 80px;
					width: 284px;
					margin:45px auto;
					font-size: 20px;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					display: flex;
					justify-content: center;
					align-items: center;
					letter-spacing: 3px;
				}
				.btnbox{
					display: flex;
					justify-content: center;
					// padding-top: 10px;
					flex-direction: row;
					.btn{
						width: 95px;
						height: 52px;
						border-radius: 12px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 16px;
						margin:  -5px 30px 30px 30px;
					}
				}
			}
		}
		
}
</style>

2.initModal.js

import Vuex from 'vuex'
// 自定义弹窗
export default function initModal(v) {
  // 挂在store到全局Vue原型上
  v.prototype.$modalStore = new Vuex.Store({
    state: {
		show:false,
		title:"标题",
		content:'内容',
		showCancel:true,
		cancelText:"取消",
		cancelColor:"#333333",
		cancelBackgroundColor:"rgba(236, 236, 236, 0.39)",
		confirmText:"确定",
		confirmColor:"#333333",
		confirmBackgroundColor:"#FFBB24",
		backgroundImage :"",
		success:null,
    },
    mutations: {
		hideModal(state) {
			// 小程序导航条页面控制
			// #ifndef H5
			if(state.hideTabBar){
				wx.showTabBar();
			}
			// #endif
			state.show = false
		},
		showModal(state,data) {
			state = Object.assign(state,data)
			console.log(state);
			state.show = true
		},
		success(state,res) {
			let cb = state.success
			let resObj={
				cancel:false,
				confirm:false
			}
			res=="confirm"?resObj.confirm=true:resObj.cancel=true
			cb && cb(resObj)
		}
    }
  })
  v.prototype.$showModal = function (option) { 
	if (typeof option === 'object') {
		// #ifndef H5
		if(option.hideTabBar){
			wx.hideTabBar();
		}
		// #endif
		
		v.prototype.$modalStore.commit('showModal', option)
	}else{
		throw "配置项必须为对象传入的值为："+typeof option;
	}
  }
}

3。布局方式不变，还是

4.使用方式需要增加backgroundImage属性

	let url="url('../../static/pic/9.jpg')";//url路径改成跟你项目对应的，如果想要白色背景，就改成白色图片
	let text="内容";
	this.$showModal({
		title: '温馨提示',
		content: text,
		cancelText:"",//传入空值表示只显示确认按钮，此代码不能省略
		confirmText:"确定",
		backgroundImage:url,
		success(res) {
			if (res.confirm) {
			//
			} 			
		}
	 })												  											  												  																								

完结。