uniapp 结合uview实现弹窗确认框

uniapp yekong

uniapp 开发自定义确认弹窗
uniapp 结合uview实现弹窗确认框

<template>
	<div>
		<div @click="show=true">
			<slot></slot>
		</div>
		<u-popup :show="show" mode="center" bgColor="transparent">
			<view class="popupwin">
				<div class="popupwintitle">
					{{title}}
				</div>
				<slot name="body"></slot>
				<div class="popupwinbottom">
					<div class="cancel" @click="show=false">取消</div>
					<div class="confirm" @click="getconfirm">确定</div>
				</div>
			</view>
		</u-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		props: {
			title: {
				type: String,
				default () {
					return '';
				}
			}
		},
		methods: {
			open() {},
			getshow() {
				this.show = true
			},
			close() {
				this.show = false
			},
			getconfirm(e) {
				this.show = false
				this.$emit('getdata', false)
			}
		}
	}
</script>

<style scoped lang="scss">
	.popupwin {
		width: 518rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: column;

		.popupwintitle {
			font-size: 34rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
		}

		.popupwinbottom {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			margin-top: 56rpx;

			.cancel {
				width: 200rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				opacity: 1;
				border: 1rpx solid #7D7D7D;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				font-size: 34rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				margin-right: 16rpx;
			}

			.confirm {
				width: 200rpx;
				height: 80rpx;
				background: #2563E9;
				border-radius: 20rpx;
				opacity: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				font-size: 34rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 16rpx;
			}
		}
	}
</style>

喜欢