uniapp实现自定义弹窗组件，可以在app全局任意地方使用

此组件可以在app全局使用，因此需要用到vuex。

1.首先安装vuex

通过此命令安装npm install vuex --save

2.创建initModal.js

import Vuexfrom'vuex'// 自定义弹窗exportdefaultfunctioninitModal(v){// 挂在store到全局Vue原型上
  v.prototype.$modalStore=newVuex.Store({
    state:{
		show:false,
		title:"标题",
		content:'内容',
		showCancel:true,
		cancelText:"取消",
		cancelColor:"#333333",
		cancelBackgroundColor:"rgba(236, 236, 236, 0.39)",
		confirmText:"确定",
		confirmColor:"#333333",
		confirmBackgroundColor:"#FFBB24",
		success:null,},
    mutations:{hideModal(state){// 小程序导航条页面控制// #ifndef H5if(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.successlet 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 H5if(option.hideTabBar){
			wx.hideTabBar();}// #endif
		
		v.prototype.$modalStore.commit('showModal', option)}else{throw"配置项必须为对象传入的值为："+typeof option;}}}

3.在main.js挂载vuex和showModal

4.showModal组件实现，我做了个判断，如果传入的cancelText是空字符串，则只显示确认键。

<template><!-- 自定义弹窗--><viewclass="_showModal" v-show="show"><viewclass="_shade"></view><viewclass="_modalBox"><viewclass="_modal"><slot name="title"><viewclass="title" v-show="title">{{title}}</view></slot><slot name="content"><viewclass="content">{{content}}</view></slot><slot name="btn"><viewclass="btnbox"><view v-if="cancelText"class="btn":style="{color:cancelColor,background:cancelBackgroundColor}" @click.stop="clickBtn('cancel')">{{cancelText}}</view><viewclass="btn":style="{color:confirmColor,background:confirmBackgroundColor}" @click.stop="clickBtn('confirm')">{{confirmText}}</view></view></slot></view></view></view></template><script>exportdefault{
		name:"show-modal",
		computed:{show(){returnthis.$modalStore.state.show;},title(){returnthis.$modalStore.state.title;},content(){returnthis.$modalStore.state.content;},showCancel(){returnthis.$modalStore.state.showCancel;},cancelText(){returnthis.$modalStore.state.cancelText;},cancelColor(){returnthis.$modalStore.state.cancelColor;},cancelBackgroundColor(){returnthis.$modalStore.state.cancelBackgroundColor;},confirmText(){returnthis.$modalStore.state.confirmText;},confirmColor(){returnthis.$modalStore.state.confirmColor;},confirmBackgroundColor(){returnthis.$modalStore.state.confirmBackgroundColor;}},
		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{
				flex: none;
				width:345px;
				min-height:256px;
				background: #fff;
				border-radius:12px;.title{
					text-align: center;
					font-size:16px;
					font-family: Source Han SansCN;
					font-weight: bold;
					color: #333333;
					margin-top:20px;}.content{
					min-height:80px;
					width:284px;
					margin:45px auto;
					font-size:20px;
					font-family: Source Han SansCN;
					font-weight:500;
					color: #333333;
					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 SansCN;
						font-weight:500;
						font-size:16px;
						margin:-5px30px30px30px;}}}}}</style>

5.使用方式

在app页面使用<show-modal></show-modal>
哪里需要弹窗时，加入这句代码：

<show-modal></show-modal>this.$showModal({
  	title:'',
  	content:'内容',
  	cancelText:"取消",//传入空值表示只显示确认按钮，此代码不能省略
  	confirmText:"确认",success(res){if(res.confirm){
  		  console.log('用户点击确定')}elseif(res.cancel){
  		  console.log('用户点击取消')}}})