uniapp项目或者vue项目 封装弹框组件

baseDialog组件代码:

<template>
	<view class="base-dialog" v-if="show">
		<view class="mask"></view>
		<view class="Popmenu" :style="{ width }">
			<view class="header">{
         
  { title }}</view>
			
			<view class="content">
				<slot></slot>
			</view>
			
			<view v-if="cancelShow || confirmShow" class="btns">
				<myButton :type=cancelType style="margin-right: 24rpx" v-if="cancelShow" @click.stop="cancel">{
         
  { cancelText }}</myButton>
				<myButton :type=confirmType v-if="confirmShow" @click.stop="confirm">{
         
  { confirmText }}</myButton>
			</view>
		</view>
	</view>
</template>

<script>
	import myButton from ../components/myButton.vue
	export default {
		props: {
			title: {
				type: String,
				default: 
			},
			show: {
				type: Boolean,
				default: false
			},
			cancelText: {
				type: String,
				default: 取消
			},
			confirmText: {
				type: String,
				default: 确定
			},
			cancelShow: {
				type: Boolean,
				default: true
			},
			confirmShow: {
				type: Boolean,
				default: true
			},
			cancelDisabled: Boolean,
			confirmDisabled: Boolean,
			width: {
				type: [String | Number],
				default: 100%
			},
			
			cancelType: String,
			confirmType: String
		},
		components: {
			myButton
		},
		computed: {
			_show: {
				get() {
					return this.show;
				},
				set(v) {
					console.log(v)
					this.$emit(update:show, v);
				}
			}
		},
		methods: {
			confirm() {
				if(this.confirmDisabled) return;
				
				this.$emit(confirm);
				this._show = false;
			},
			cancel() {
				if(this.cancelDisabled) return;
				this.$emit(cancel);
				this._show = false;
			}
		}
	}
</script>

<style lang=scss>
.base-dialog {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 20;
	transition:opacity 1s linear;
	.mask{
		background-color:rgba(0, 0, 0, 0.9);
		opacity: 0.5;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top:0;
	}
	
	.Popmenu {
		border-radius: 24rpx;
		padding: 40rpx;
		box-sizing: border-box;
		background: white;
		position: absolute;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
		
		.header {
			text-align: center;
			margin-bottom: 24rpx;
			font-size: 40rpx;
		}
		
		.content {
			margin-bottom: 40rpx;
		}
	}
	
	.btns {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>

在data定义弹框显示与隐藏 infoShow: false, // 榜单规则

引入组件: