yichael_zhongchuan_manager/components/popAlert.vue

<template>
	<view class="root" catchtouchmove='return' v-if="bShow">
		<!-- 背景黑幕 -->
		<view class="blackBg" @click="close()"></view>
		<!-- 背景 -->
		<view class="formBg">
			<!-- 标题 -->
			<view class="titleBg">
				<view class="title">{{title}}</view>
			</view>
			<!-- 内容 -->
			<view class="middle">{{content}}</view>
			<!-- 按钮区 -->
			<view class="btnArea">
				<button type="default" size="mini" class="confirm" @click="confirm()">确定</button>
				<button type="default" size="mini" class="cancel" @click="cancel()">取消</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bShow:false,
				title:'标题',
				// content:'内容',
				callback:null
			}
		},
		methods: {
			isShow(bShow){
				this.bShow = bShow;	
			},
			setTitle(title){
				this.title = title;
			},
			setContent(content,callback){
				this.content = content;
				this.callback = callback;
			},
			close(){
				// this.bShow = !this.bShow;
			},
			confirm(){			
				this.bShow = !this.bShow;
				this.callback();
			},
			cancel(){
				this.bShow = !this.bShow;
			}
		},
	}
</script>

<style lang="scss">
	.root{	
		width: 100%;
		height: 100%;
		
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.blackBg{
		width: 100%;
		height: 100%;
		
		opacity: 0.5;
		background-color: #000000;
	}
	.formBg{
		position: absolute;
		width: 20%;
		
		background-color: #ffffff;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
	}
	.titleBg{
		width: 100%;
		
		background-color: #ff0000;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title{
		color: #ffffff;
		font-size: 30rpx;
		margin: 5%;
		
		// border:1px solid  #000000;
	}
	.middle{
		width: 100%;
		// height: 100%;	
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-weight: 400 !important;
		margin: 5%;
		// border:1px solid  #000000;
	}
	.btnArea{
		width: 100%;
		// height: 10%;
		// border:1px solid  #000000;
		
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		
		margin-bottom: 5%;
	}
	.confirm{
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}
	.cancel{
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}
</style>