siyu_app/pages_watch/components/myDialog/myDialog.vue

<template>
	<uni-popup ref="dialog" type="center" :is-mask-click="closeOnClickOverlay" :safe-area='false'>
		<view class="inputDialog">
			<view class="inputDialog-head">{{title}}</view>
			<view class="inputDialog-body">
				<slot name="dialogBody"></slot>
			</view>
			<view class="inputDialog-footer">
				<view class="inputDialog-footer-btn" @tap="onCancel">{{cancelText}}</view>
				<view class="inputDialog-footer-btn inputDialog-footer-l" @tap="onConfirm">{{confirmText}}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "myDialog",
		props: {
			title: {
				type: String,
				default: ""
			},
			// 取消文案
			cancelText: {
				type: String,
				default: "取消"
			},
			// 确认文案
			confirmText: {
				type: String,
				default: "确定"
			},
			// 是否允许点击遮罩关闭modal
			closeOnClickOverlay: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			open() {
				this.$refs.dialog.open()
			},
			close() {
				this.$refs.dialog.close()
			},
			onCancel() {
				this.$emit("cancel")
			},
			onConfirm(val) {
				this.$emit("confirm")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.inputDialog {
		width: 600rpx;
		border-radius: 22rpx;
		background-color: #fff;
		overflow: hidden;
		&-head {
			padding-top: 50rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
	
		&-body {
			padding: 24rpx;
		}
	
		&-footer {
			display: flex;
			flex-direction: row;
			border-top: 1rpx solid #f5f5f5;
	
			&-btn {
				display: flex;
				flex: 1;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				height: 45px;
				font-size: 16px;
				color: #333;
			}
	
			&-l {
				color: #007aff;
				border-left-color: #f0f0f0;
				border-left-style: solid;
				border-left-width: 1rpx;
			}
		}
	}
</style>