zhengbasai/components/CustomPop.vue

<template>
	<div class="del_pop" v-if="popShow">
		<div class="del_content">
			<div class="d_icon">
				<slot name="header-image">
				</slot>
			</div>
			<div class="con_border">
				<div class="tip_title">
					温馨提醒
				</div>
				<div class="text">
					<slot name="content">您确定删除本条地址吗？</slot>
				</div>
				<div class="del_btn">
					<div class="cancel" v-if="showCancel" @click="handleCancel">取消</div>
					<div class="sure" @click="handleSure">确定</div>
				</div>
			</div>
		</div>
	</div>
	<!-- <div>u-popup</div> -->
</template>

<script>
	export default {
		name: "CustomPop",
		props:{
			showCancel:{
				type:Boolean,
				default:true,
			}
		},
		data() {
	
			return {
				popShow: false
			};
		},
		methods: {
			showEdit() {
				this.popShow = true
			},
			handleCancel() {

				this.$emit('cancel', '用户点击了取消')
				this.popShow = false
			},
			handleSure() {

				this.$emit("sure", '用户点击了确定')
				this.popShow = false
			}
		}

	}
</script>

<style lang="scss">
	.del_pop {
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		z-index:999;
		align-items: center;

		.del_content {
			position: relative;
			// height: 200px;
			padding: 34px 0 10px;
			width: 324px;
			background-color: #fff;
			display: flex;
			justify-content: center;
			border-radius: 12px;

			.d_icon {
				position: absolute;
				top: -34px;
				width: 91px;
				height: 68px;

				image {
					width: 91px;
					height: 68px;

				}


			}

			.con_border {
				margin: 0 20px;
				padding-bottom: 20px;
				width: 100%;


				.tip_title {
					text-align: center;
					padding: 16px 0;
					font-size: 19px;
					color: #333333;
				}

				.text {
					font-size: 17px;
					text-align: center;

					color: #333333;
				}

				.del_btn {
					margin-top: 24px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					font-size: 16px;

					.cancel {
						flex: 1;
						border-radius: 22px;
						opacity: 1;
						background: #F5F5F5;
						height: 44px;
						line-height: 44px;
						margin-right: 20px;
						color: #333333;
					}

					.sure {
							flex: 1;
						border-radius: 22px;
						opacity: 1;
						background: linear-gradient(91deg, #F30000 1%, #FE4815 99%);
						height: 44px;
						letter-spacing: 0em;
						color: #FFFFFF;
						line-height: 44px;
						
					}
				}
			}
		}
	}
</style>