Storage-Android-master/components/my-dialog/my-dialog.vue

<!-- 自定义对话框 -->
<template>
	<u-modal 
		:z-index="zIndex" 
		v-model="modal" 
		:show-title="false" 
		:show-cancel-button="false" 
		:show-confirm-button="false" 
		:mask-close-able="maskCloseAble"
		>
		<view class="container">
			<!-- 标题 -->
			<view v-if="showTitle" class="title" :style="titleStyle">{{ title }}</view>
			<!-- 中间显示内容 -->
			<view class="content flex-column-center">
				<slot name="content"></slot>
			</view>
			<!-- 底部按钮 -->
			<view class="btn-wrap flex-between" style="width: 470rpx;margin: 30rpx auto;" v-if="showCancelButton || showConfirmButton">
				<view v-if="showCancelButton" class="btn" style="margin-right: 44rpx;">
					<u-button class="cancelBtn" type="primary" :style="{...cancelStyle,...btnStyle}" @click="cancel">{{ cancelText }}</u-button>
				</view>
				<view v-if="showConfirmButton" class="btn">
					<u-button class="cfmBtn" type="primary" :style="{...cfmStyle,...btnStyle}" @click="cfm">{{ cfmText }}</u-button>
				</view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	export default {
		data() {
			return {
				modal: false
			}
		},
		methods:{
			cfm() {
				this.$emit('cfmClick')
			},
			cancel() {
				this.$emit('cancelClick')
			}
		},
		watch: {
			value: {
			  handler (n) {
				this.modal = n
			  },
			  immediate: true
			},
			modal (n) {
			  this.$emit('input', n)
			  if(!n) {
				  this.$emit('cancelClick')
			  }
			}
		},
		props: {
			value: {
			  type: Boolean,
			  default: false,
			  require: true
			},
			zIndex: '',
			title: {
				type: String,
				default: '标题'
			},
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			showDialog: {
				type: Boolean,
				default: false
			},
			showTitle: {
				type: Boolean,
				default: true
			},
			showCancelButton: {
				type: Boolean,
				default: true
			},
			titleStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			cancelStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			cfmStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			btnStyle: {
				type: Object,
				default: () => {
					return {
						height: '57rpx',
						width: '200rpx'
					}
				}
			},
			showConfirmButton: {
				type: Boolean,
				default: true
			},
			cancelText:{
				type: String,
				default: '取消'
			},
			cfmText:{
				type: String,
				default: '确认'
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/css/mycss.scss';

	/deep/ .u-mode-center-box{
		overflow: visible !important;
		min-height: 0;
	}
	/deep/ .u-drawer__scroll-view > .uni-scroll-view > .uni-scroll-view {
		overflow: visible !important;
	}
	/deep/ .u-model{
		border-radius: 8px;
		overflow: visible;
	}
	.container {

		height: 100%;
		.title {
			padding: 40rpx 0;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}
		.content{
		}
		.btn-wrap {
			.btn{
				flex: 1;
				.cancelBtn {
					width: 100%;
					background-color: gray;
				}
				.cfmBtn {
					width: 100%;
				}
			}
		}
	}
</style>