uniapp中自定义showModal样式

野性酷女 2023-09-30 08:03 33阅读 0赞

### uniapp中自定义showModal样式 ###

*  页面中使用
 *   *  在main.js中引入show-modal组件
     *  创建组件show-modal
     *   *  组件名称show-modal.vue
         *  创建initModal.js

![在这里插入图片描述][2132e01a973f431a8eca77ee56315f7e.png_pic_center]

# 页面中使用 #

<show-modal></show-modal>
      this.$showModal({
      	title: '',
      	content: '当',
      	cancelText:"取消",
      	confirmText:"生成赛果",
      	success(res) {
      		if (res.confirm) {
      		  console.log('用户点击确定')
      		} else if (res.cancel) {
      		  console.log('用户点击取消')
      		}			
      	}
      })

## 在main.js中引入show-modal组件 ##

import initModal from "@/components/show-modal/initModal.js"
    import showModal from "@/components/show-modal/show-modal.vue"
    
    initModal(Vue);
    Vue.component('show-modal',showModal);

## 创建组件show-modal ##

### 组件名称show-modal.vue ###

<template>
    	<view class="_showModal" v-show="show">
    			<view class="_shade"></view>
    			<view class="_modalBox">
    				<view class="_modal">
    					<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 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>
    			</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;
    				}
    		},
    		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:250px;
    				min-height:170px;
    				background: #fff;
    				border-radius: 16px;
    				.title{
    					text-align: center;
    					font-size: 16px;
    					font-family: Source Han Sans CN;
    					font-weight: bold;
    					color: #333333;
    					margin-top: 20px;
    				}
    				.content{
    					min-height: 80px;
    					width: 86%;
    					margin:20px auto;
    					font-size: 20px;
    					font-family: Source Han Sans CN;
    					font-weight: 500;
    					color: #333333;
    					display: flex;
    					justify-content: center;
    					align-items: center;
    					text-align: center;
    				}
    				.btnbox{
    					display: flex;
    					width: 88%;
    					margin: auto;
    					margin-bottom: 20px;
    					flex-direction: row;
    					justify-content: space-between;
    					.btn{
    						width: 100px;
    						height: 32px;
    						border-radius: 16px;
    						display: flex;
    						justify-content: center;
    						align-items: center;
    						font-family: Source Han Sans CN;
    						font-weight: 400;
    					}
    				}
    			}
    		}
    		
    }
    </style>

### 创建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:"#ED4F4E",
    		cancelBackgroundColor:"#FFE5E5",
    		confirmText:"确定",
    		confirmColor:"#FFFEFA",
    		confirmBackgroundColor:"linear-gradient(0deg, #F65555 0%, #E54848 100%)",
    		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;
    	}
      }
    }

[2132e01a973f431a8eca77ee56315f7e.png_pic_center]: https://img-blog.csdnimg.cn/2132e01a973f431a8eca77ee56315f7e.png#pic_center