BiKing/components/confirm-popup/confirm-popup.vue

<template>
	<uni-popup ref="popupRef">

		<view class="unopen-box">
			<view class="content">
				{{ content }}
			</view>
			<!-- @click.stop="" -->
			<view class="unopen-btns">
				<view class="unopen-btn" @click.stop="close()">
					取消
				</view>
				<view class="unopen-btn" @click.stop="confirm()">
					确认
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "confirm-popup",
		props: {
			content: {
				type: String,
				default: '是否确认？'
			}
		},
		data() {
			return {

			};
		},
		mounted() {
			// this.$refs.popupRef.open()
			// this.open()
		},
		methods: {
			open() {
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
			close(){
				this.$refs.popupRef.close()
			},
			confirm(){
				this.close()
				this.$emit('confirm')
			}

		}
	}
</script>

<style lang="scss" scoped>
	.unopen-box {
		width: 600rpx;
		min-height: 320rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		padding: 50rpx 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.content {
			text-align: center;
			font-size: 36rpx;
		}
		.unopen-btns{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.unopen-btn{
				width: 220rpx;
				height: 80rpx;
				border-radius: 6rpx;
				text-align: center;
				line-height: 78rpx;
				color: #fff;
				font-size: 30rpx;
				border: 1rpx solid $Theme-Color;
				color: $Theme-Color;
			}
			.unopen-btn + .unopen-btn{
				color: #fff;
				background-color: $Theme-Color;
			}
		}
	}
</style>