jili2-ph/components/cmodel/cmodel.vue

<template>
	<view>
		<view class='modal-mask' v-if='show' @click='clickMask'>
		  <view class='modal-content'>
		    <view class='modal-header'>
		      {{title}}
		    </view>
		    <scroll-view scroll-y class='main-content'>
		      <slot></slot>
		    </scroll-view>
		    <view class='modal-footer'>
		      <view v-if='!single' class='cancel-btn' @click='cancel'>取消</view>
		      <view class='confirm-btn' @click='confirm'>确定 </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cmodel",
		components: {
		
		},
		props: {
			//是否显示modal弹窗
			show: {
				type: Boolean,
				value: false
			},
			//控制底部是一个按钮还是两个按钮，默认两个
			single: {
				type: Boolean,
				value: false 
			},
			title: {
				type: String,
				value: '提示' 
			}
		},
		data() {
			return {
				
			}
		},
        mounted() {
			console.log(this.show);
        },
		methods: {
			clickMask() {
			  
			},
			// 点击取消按钮的回调函数
			cancel() {
				this.$emit('update:show', false);
				this.$emit('cancel');
			},
			// 点击确定按钮的回调函数
			confirm() {
			  this.$emit('update:show', false);
			  this.$emit('confirm');
			}
		}
	};
</script>

<style lang="scss" scoped>
	/*遮罩层*/
	.modal-mask{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    position: fixed;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    background-color: rgba(0,0,0,0.5);
	    z-index: 999;
	  }
	  /*遮罩内容*/
	  .modal-content{
	    display: flex;
	    flex-direction: column;
	    width: 80%;
	    background-color: #fff;
	    border-radius: 10rpx;
	    padding: 20rpx;
	    text-align: left;
	  }
	  /*中间内容*/
	  .main-content{
	    flex: 1;
	    height: 100%;
	    min-height: 100rpx;
	    max-height: 400rpx;
	    overflow-y: hidden; 
	  }
	  .modal-header{
	    height: 80rpx;
	    line-height: 80rpx;
	    text-align: center;
	    margin-bottom: 30rpx;
	    border-bottom: 1rpx solid #D2D3D5;
	  }
	  /*底部按钮*/
	  .modal-footer{
	    display: flex;
	    flex-direction: row;
	    height: 80rpx;
	    line-height: 80rpx;
	    border-top: 1rpx solid #D2D3D5;
	    margin-top: 30rpx;
	    text-align: center;
	  }
	  .cancel-btn, .confirm-btn{
	    flex: 1;
	    height: 100rpx;
	    line-height: 100rpx;
	    text-align: center;
	    font-size: 32rpx;
	  }
	  .cancel-btn{
	    color: #000;
	    border-right: 1rpx solid #D2D3D5;
	  }
	  .confirm-btn {
	    color: var(--themeColor)
	  }
</style>