2021-11-12 项目自定义组件（模态框）

模态框

element的模态框组件实现太复杂了，层层封装工具类，再增添dom，由于项目开发时间赶，就写个能用的就行，使用css阻止模态框外被点击，然后画个框就可以了

<template>
	<div class="cl-dialog-box" v-show="visible">
		<div class="cl-dialog">
			<div class="cl-dialog-header">
				<slot name="header">
					{
    
    {
    
     title }}
				</slot>
				<i class="iconfont icon-wrong" @click="visible = false"></i>
			</div>
			<div class="cl-dialog-content">
				<slot></slot>
			</div>
			<div class="cl-dialog-footer">
				<slot name="footer">
					<button>取消</button>
					<button>确认</button>
				</slot>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
    
    
		name: 'ClDialog',
		props: {
    
    
			title: String,
			visible: {
    
    
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.cl-dialog-box {
    
    
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1001;
		overflow: scroll;
		outline: 0;
		-webkit-overflow-scrolling: touch;
		height: 100%;
		background: rgba(0, 0, 0, .3);
	}
	
	.cl-dialog {
    
    
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: $--color-white;
		padding: 20px;
		width: 40%;
		
		.icon-wrong {
    
    
			position: absolute;
			right: 20px;
			top: 20px;
			font-size: 22px;
			cursor: pointer;
		}
		
		.cl-dialog-footer {
    
    
			text-align: right;
			margin-top: $--margin-medium;
			
			button {
    
    
				margin-left: $--margin-medium;
				padding: 5px $--padding-small;
				width: 70px;
			}
		}
	}
</style>