<template>
	<view class="dialogBox" v-show="dialogVisible">
		<view class="mask" @click="hideFn"></view>
		<view class="dialogContent">
			<!-- <view class="dialogTitle">
				<slot name="title"></slot>
				<text @click="hideFn" style="float: right;">X</text>
			</view> -->
			<!-- <view class="dialogInner"> -->
			<slot name="content"></slot>
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			canClickMask:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				dialogVisible:false
			};
		},
		mounted() {
			
		},
		methods:{
			showFn(){
				this.dialogVisible=true
			},
			hideFn(){
				if(this.canClickMask){
					this.dialogVisible=false
				}
			},
			hideFn2(){
				this.dialogVisible=false
			}
		}
	}
</script>

<style lang="scss" scoped>
.dialogBox{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.mask{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.4);
}
.dialogTitle{
	padding: 15px;
}
.dialogContent{
	width: calc(100% - 90px);
	position: fixed;
	left: 45px;
	top: 50%;
	transform: translateY(-50%);
	background-color: white;
	border-radius: 4px;
}
.dialogInner{
	padding: 0 15px;
}
</style>
