gas-cylinder-h5/components/x-modal.vue

<template>
	<!-- 模态框 -->
	<view class="card_modal center_in" v-if="showModal">
		<view class="card_lk">
			<view class="modal_title">{{title}}</view>
			<view class="btn_modal">
				<view class="item_btn center_in" @click="close">取消</view>
				<view class="item_btn center_in" style="color: #f1a532;">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'x-modal',
		props: {
			show: {
				type: Boolean,
				default () {
					return false
				}
			},
			title: {
				type: String,
				default () {
					return ''
				}
			},
		},
		watch: {
			show: {
				handler(newVal) {
					if (newVal) {
						this.showModal = true
					} else {
						this.showModal = false
					}
				},
				deep: true // 开启深度监听
			}
		},
		data() {
			return {
				showModal: false,
			}
		},
		methods:{
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_modal {
		position: fixed;
		z-index: 10070;
		inset: 0px;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.card_lk {
		width: 60%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.modal_title {
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		padding: 30rpx 50rpx;
	}

	.btn_modal {
		display: flex;
		border-top: 1rpx solid #e7e6e4;
	}

	.item_btn {
		flex: 1;
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.item_btn:nth-child(1) {
		border-right: 1rpx solid #e7e6e4;
	}
</style>