jsm-mall-h5-front/src/components/wl-modal.vue

<template>
	<view class="wl-modal" v-if="visible">
		<view class="wl-modal-body" :class="{'modal-center-enter': visible}">
			<view class="wl-modal-body-title" v-if="title">
				{{title}}
			</view>
			<view class="wl-modal-body-content" v-if="content" :style="{textAlign: textAlign}">
				{{content}}
			</view>
			<view class="wl-modal-body-button">
				<button :open-type="cancelOpenType" class="wl-modal-body-button-item" @tap="cancel" :style="{color: cancelColor}" v-if="showCancel && cancelText">
					{{cancelText}}
				</button>
				<button :open-type="confirmOpenType" class="wl-modal-body-button-item" @tap="confirm" :style="{color: confirmColor}" v-if="confirmText">
					{{confirmText}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'wl-modal',
		data () {
			return {
				visible: false, // 是否显示
				title: '提示', // 提示标题
				content: '', // 提示内容
				cancelText: '取消', // 取消按钮的文字  
				confirmText: '确定', // 确认按钮文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#576B95', // 确定按钮颜色
				cancelColor: '#666', // 取消按钮颜色
				textAlign: 'center' ,// 对齐方式
				confirmOpenType: '', // 确定按钮open-type
				cancelOpenType: '', // 取消按钮open-type
				success: () => {} // 回调方法
			}
		},
		methods: {
			// 初始化弹框并打开
			showModal(data) {
				if (data.title) {
					this.title = data.title
				} else {
					this.title = '提示'
				}
				if (data.content) {
					this.content = data.content
				} else {
					this.content = ''
				}
				if (data.cancelText) {
					this.cancelText = data.cancelText
				} else {
					this.cancelText = '取消'
				}
				if (data.confirmText) {
					this.confirmText = data.confirmText
				} else {
					this.confirmText = '确定'
				}
				if (data.showCancel === false || data.showCancel === true) {
					this.showCancel = data.showCancel
				} else {
					this.showCancel = true
				}
				if (data.confirmColor) {
					this.confirmColor = data.confirmColor
				} else {
					this.confirmColor = '#576B95'
				}
				if (data.cancelColor) {
					this.cancelColor = data.cancelColor
				} else {
					this.cancelColor = '#666'
				}
				if (data.textAlign) {
					this.textAlign = data.textAlign
				} else {
					this.textAlign = 'center'
				}
				if (data.confirmOpenType) {
					this.confirmOpenType = data.confirmOpenType
				} else {
					this.confirmOpenType = ''
				}
				if (data.cancelOpenType) {
					this.cancelOpenType = data.cancelOpenType
				} else {
					this.cancelOpenType = ''
				}
				if (data.success) {
					this.success = data.success
				} else {
					this.success = () => {}
				}
				this.visible = true
			},
			// 取消
			cancel() {
				this.success({
					cancel: true,
					confirm: false,
					errMsg: 'showModal:ok'
				});
				this.visible = false;
			},
			// 确定
			confirm() {
				this.success({
					cancel: false,
					confirm: true,
					content: null,
					errMsg: 'showModal:ok'
				});
				this.visible = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
// 显示和隐藏效果
@keyframes modal-center-enter {
  0% {
	opacity: 0;
	transform: scale(0.7);
  }

  to {
	opacity: 1;
  }
}
.wl-modal{
	width: 100%;
	height: 100%;
	background-color: rgba($color: #000000, $alpha: 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	.wl-modal-body{
		width: 640rpx;
		padding-top: 64rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-sizing: border-box;
		display: table-cell;
		vertical-align: middle;
		&.modal-center-enter{
			animation: modal-center-enter 0.2s ease-out forwards;
		}
		.wl-modal-body-title{
			font-size: 34rpx;
			font-weight: 900;
			color: #000;
			text-align: center;
			margin-bottom: 32rpx;
			padding: 0 48rpx;
			box-sizing: border-box;
		}
		.wl-modal-body-content{
			font-size: 34rpx;
			line-height: 48rpx;
			color: #666;
			word-break:break-all;
			word-wrap:break-word;
			white-space:pre-wrap;
			margin-bottom: 32rpx;
			padding: 0 48rpx;
			box-sizing: border-box;
		}
		.wl-modal-body-button{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: #E5E5E5 1px solid;
			.wl-modal-body-button-item{
				&::after {
					border: none;
				}
				border-right: #E5E5E5 1px solid;
				background-color: initial;
				font-size: 34rpx;
				border-radius: 0;
				flex: auto;
				box-sizing: border-box;
				text-align: center;
				padding: 30rpx 16rpx;
				font-weight: 900;
				line-height: normal;
				overflow: initial!important;
				&:last-child{
					border-right: 0;
				}
			}
		}
	}
}
</style>