修改

components/thorui/tui-modal/tui-modal.vue

@@ -1,407 +1,376 @@
 <template>
-	<view class="tui-modal__container" :class="[show ? 'tui-modal-show' : '']" :style="{zIndex:zIndex}" @touchmove.stop.prevent>
-		<view
-			class="tui-modal-box"
-			:style="{ width: width, padding: padding, borderRadius: radius, backgroundColor: backgroundColor,zIndex:zIndex+1 }"
-			:class="[fadeIn || show ? 'tui-modal-normal' : 'tui-modal-scale', show ? 'tui-modal-show' : '']"
-		>
+	<view @touchmove.stop.prevent>
+		<view class="tui-modal-box" :style="{width:width,padding:padding,borderRadius:radius}" :class="[(fadeIn || show)?'tui-modal-normal':'tui-modal-scale',show?'tui-modal-show':'']">
 			<view v-if="!custom">
-				<view class="tui-modal-title" v-if="title">{{ title }}</view>
-				<view class="tui-modal-content" :class="[title ? '' : 'tui-mtop']" :style="{ color: color, fontSize: size + 'rpx' }">{{ content }}</view>
-				<view class="tui-modalBtn-box" :class="[button.length != 2 ? 'tui-flex-column' : '']">
-					<block v-for="(item, index) in button" :key="index">
-						<button
-							class="tui-modal-btn"
-							:class="[
-								'tui-' + (item.type || 'primary') + (item.plain ? '-outline' : ''),
-								button.length != 2 ? 'tui-btn-width' : '',
-								button.length > 2 ? 'tui-mbtm' : '',
-								shape == 'circle' ? 'tui-circle-btn' : ''
-							]"
-							:hover-class="'tui-' + (item.plain ? 'outline' : item.type || 'primary') + '-hover'"
-							:data-index="index"
-							@tap="handleClick"
-						>
-							{{ item.text || '确定' }}
-						</button>
+				<view class="tui-modal-title" v-if="title">{{title}}</view>
+				<view class="tui-modal-content" :class="[title?'':'tui-mtop']" :style="{color:color,fontSize:size+'rpx'}">{{content}}</view>
+				<view class="tui-modalBtn-box" :class="[button.length!=2?'tui-flex-column':'']">
+					<block v-for="(item,index) in button" :key="index">
+                        <!-- :style="{background: item.customStyle.bgColor ? item.customStyle.bgColor : '',color: item.customStyle.color ? item.customStyle.color : ''}" -->
+						<button class="tui-modal-btn" :class="[(!item.customStyle && ('tui-'+(item.type || 'primary')+(item.plain?'-outline':''))),button.length!=2?'tui-btn-width':'',button.length>2?'tui-mbtm':'',shape=='circle'?'tui-circle-btn':'']"
+                         :style="{background: item.customStyle.bgColor ? item.customStyle.bgColor : '',color: item.customStyle.color ? item.customStyle.color : '',fontSize: item.customStyle.fontSize ? item.customStyle.fontSize : ''}"
+						 :hover-class="!item.customStyle && ('tui-'+(item.plain?'outline':(item.type || 'primary'))+'-hover')"  :data-index="index" @tap="handleClick">{{item.text || "确定"}}</button>
 					</block>
-				</view>
+				</view> 
+			</view>
+			<view v-else>
+				<slot></slot>
 			</view>
-			<view v-else><slot></slot></view>
 		</view>
-		<view class="tui-modal-mask" :class="[show ? 'tui-mask-show' : '']" :style="{zIndex:maskZIndex}" @tap="handleClickCancel"></view>
+		<view class="tui-modal-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickCancel"></view>
+
 	</view>
 </template>
 
 <script>
-export default {
-	name: 'tuiModal',
-	props: {
-		//是否显示
-		show: {
-			type: Boolean,
-			default: false
-		},
-		width: {
-			type: String,
-			default: '84%'
-		},
-		backgroundColor: {
-			type: String,
-			default: '#fff'
-		},
-		padding: {
-			type: String,
-			default: '40rpx 64rpx'
-		},
-		radius: {
-			type: String,
-			default: '24rpx'
-		},
-		//标题
-		title: {
-			type: String,
-			default: ''
-		},
-		//内容
-		content: {
-			type: String,
-			default: ''
-		},
-		//内容字体颜色
-		color: {
-			type: String,
-			default: '#999'
-		},
-		//内容字体大小 rpx
-		size: {
-			type: Number,
-			default: 28
-		},
-		//形状 circle, square
-		shape: {
-			type: String,
-			default: 'square'
-		},
-		button: {
-			type: Array,
-			default: function() {
-				return [
-					{
+	export default {
+		name: 'tuiModal',
+		props: {
+			//是否显示
+			show: {
+				type: Boolean,
+				default: false
+			},
+			width: {
+				type: String,
+				default: '84%'
+			},
+			padding: {
+				type: String,
+				default: '40rpx 64rpx'
+			},
+			radius: {
+				type: String,
+				default: '24rpx'
+			},
+			//标题
+			title: {
+				type: String,
+				default: ''
+			},
+			//内容
+			content: {
+				type: String,
+				default: ''
+			},
+			//内容字体颜色
+			color: {
+				type: String,
+				default: '#999'
+			},
+			//内容字体大小 rpx
+			size: {
+				type: Number,
+				default: 28
+			},
+			//形状 circle, square
+			shape: {
+				type: String,
+				default: 'square'
+			},
+			button: {
+				type: Array,
+				default: function() {
+					return [{
 						text: '取消',
-						type: 'red',
+						type: 'danger',
 						plain: true //是否空心
-					},
-					{
+					}, {
 						text: '确定',
-						type: 'red',
+						type: 'danger',
 						plain: false
-					}
-				];
+					}]
+				}
+			},
+			//点击遮罩 是否可关闭
+			maskClosable: {
+				type: Boolean,
+				default: true
+			},
+			//淡入效果，自定义弹框插入input输入框时传true
+			fadeIn: {
+				type: Boolean,
+				default: false
+			},
+			//自定义弹窗内容
+			custom: {
+				type: Boolean,
+				default: false
 			}
 		},
-		//点击遮罩 是否可关闭
-		maskClosable: {
-			type: Boolean,
-			default: true
-		},
-		//淡入效果，自定义弹框插入input输入框时传true
-		fadeIn: {
-			type: Boolean,
-			default: false
-		},
-		//自定义弹窗内容
-		custom: {
-			type: Boolean,
-			default: false
-		},
-		//容器z-index
-		zIndex:{
-			type: Number,
-			default: 9997
-		},
-		//mask z-index
-		maskZIndex:{
-			type: Number,
-			default: 9990
-		}
-	},
-	data() {
-		return {};
-	},
-	methods: {
-		handleClick(e) {
-			if (!this.show) return;
-			const dataset = e.currentTarget.dataset;
-			this.$emit('click', {
-				index: Number(dataset.index)
-			});
+		data() {
+			return {
+
+			}
 		},
-		handleClickCancel() {
-			if (!this.maskClosable) return;
-			this.$emit('cancel');
+		methods: {
+			handleClick(e) {
+				if (!this.show) return
+				const dataset = e.currentTarget.dataset
+				this.$emit('click', {
+					index: Number(dataset.index)
+				})
+			},
+			handleClickCancel() {
+				if (!this.maskClosable) return
+				this.$emit('cancel')
+			}
 		}
 	}
-};
 </script>
 
 <style scoped>
-.tui-modal__container {
-	width: 100%;
-	height: 100%;
-	position: fixed;
-	left: 0;
-	top: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	visibility: hidden;
-}
-.tui-modal-box {
-	position: relative;
-	opacity: 0;
-	visibility: hidden;
-	box-sizing: border-box;
-	transition: all 0.3s ease-in-out;
-}
-
-.tui-modal-scale {
-	transform: scale(0);
-}
-
-.tui-modal-normal {
-	transform: scale(1);
-}
-
-.tui-modal-show {
-	opacity: 1;
-	visibility: visible;
-}
-
-.tui-modal-mask {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.6);
-	transition: all 0.3s ease-in-out;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.tui-mask-show {
-	visibility: visible;
-	opacity: 1;
-}
-
-.tui-modal-title {
-	text-align: center;
-	font-size: 34rpx;
-	color: #333;
-	padding-top: 20rpx;
-	font-weight: bold;
-}
-
-.tui-modal-content {
-	text-align: center;
-	color: #999;
-	font-size: 28rpx;
-	padding-top: 20rpx;
-	padding-bottom: 60rpx;
-}
-
-.tui-mtop {
-	margin-top: 30rpx;
-}
-
-.tui-mbtm {
-	margin-bottom: 30rpx;
-}
-
-.tui-modalBtn-box {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.tui-flex-column {
-	flex-direction: column;
-}
-
-.tui-modal-btn {
-	width: 46%;
-	height: 68rpx;
-	line-height: 68rpx;
-	position: relative;
-	border-radius: 10rpx;
-	font-size: 26rpx;
-	overflow: visible;
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.tui-modal-btn::after {
-	content: ' ';
-	position: absolute;
-	width: 200%;
-	height: 200%;
-	-webkit-transform-origin: 0 0;
-	transform-origin: 0 0;
-	transform: scale(0.5, 0.5) translateZ(0);
-	left: 0;
-	top: 0;
-	border-radius: 20rpx;
-	z-index: 2;
-}
-
-.tui-btn-width {
-	width: 80% !important;
-}
-
-.tui-primary {
-	background: #5677fc;
-	color: #fff;
-}
-
-.tui-primary-hover {
-	background: #4a67d6;
-	color: #e5e5e5;
-}
-
-.tui-primary-outline {
-	color: #5677fc;
-	background: transparent;
-}
-
-.tui-primary-outline::after {
-	border: 1px solid #5677fc;
-}
-
-.tui-danger {
-	background: #ed3f14;
-	color: #fff;
-}
-
-.tui-danger-hover {
-	background: #d53912;
-	color: #e5e5e5;
-}
-
-.tui-danger-outline {
-	color: #ed3f14;
-	background: transparent;
-}
-
-.tui-danger-outline::after {
-	border: 1px solid #ed3f14;
-}
-
-.tui-red {
-	background: #e41f19;
-	color: #fff;
-}
-
-.tui-red-hover {
-	background: #c51a15;
-	color: #e5e5e5;
-}
-
-.tui-red-outline {
-	color: #e41f19;
-	background: transparent;
-}
-
-.tui-red-outline::after {
-	border: 1px solid #e41f19;
-}
-
-.tui-warning {
-	background: #ff7900;
-	color: #fff;
-}
-
-.tui-warning-hover {
-	background: #e56d00;
-	color: #e5e5e5;
-}
-
-.tui-warning-outline {
-	color: #ff7900;
-	background: transparent;
-}
-
-.tui-warning-outline::after {
-	border: 1px solid #ff7900;
-}
-
-.tui-green {
-	background: #19be6b;
-	color: #fff;
-}
-
-.tui-green-hover {
-	background: #16ab60;
-	color: #e5e5e5;
-}
-
-.tui-green-outline {
-	color: #19be6b;
-	background: transparent;
-}
-
-.tui-green-outline::after {
-	border: 1px solid #19be6b;
-}
-
-.tui-white {
-	background: #fff;
-	color: #333;
-}
-
-.tui-white-hover {
-	background: #f7f7f9;
-	color: #666;
-}
-
-.tui-white-outline {
-	color: #333;
-	background: transparent;
-}
-
-.tui-white-outline::after {
-	border: 1px solid #333;
-}
-
-.tui-gray {
-	background: #ededed;
-	color: #999;
-}
-
-.tui-gray-hover {
-	background: #d5d5d5;
-	color: #898989;
-}
-
-.tui-gray-outline {
-	color: #999;
-	background: transparent;
-}
-
-.tui-gray-outline::after {
-	border: 1px solid #999;
-}
-
-.tui-outline-hover {
-	opacity: 0.6;
-}
-
-.tui-circle-btn {
-	border-radius: 40rpx !important;
-}
-
-.tui-circle-btn::after {
-	border-radius: 80rpx !important;
-}
-</style>
+	.tui-modal-box {
+		position: fixed;
+		left: 50%;
+		top: 50%;
+		margin: auto;
+		background-color: #fff;
+		z-index: 9999998;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		box-sizing: border-box;
+		visibility: hidden;
+	}
+
+	.tui-modal-scale {
+		transform: translate(-50%, -50%) scale(0);
+	}
+
+	.tui-modal-normal {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	.tui-modal-show {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.tui-modal-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.6);
+		z-index: 9999996;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.tui-mask-show {
+		visibility: visible;
+		opacity: 1;
+	}
+
+	.tui-modal-title {
+		text-align: center;
+		font-size: 34rpx;
+		color: #333;
+		padding-top: 20rpx;
+		font-weight: bold;
+	}
+
+	.tui-modal-content {
+		text-align: center;
+		color: #999;
+		font-size: 28rpx;
+		padding-top: 20rpx;
+		padding-bottom: 60rpx;
+	}
+
+	.tui-mtop {
+		margin-top: 30rpx;
+	}
+
+	.tui-mbtm {
+		margin-bottom: 30rpx;
+	}
+
+	.tui-modalBtn-box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between
+	}
+
+	.tui-flex-column {
+		flex-direction: column;
+	}
+
+	.tui-modal-btn {
+		width: 46%;
+		height: 68rpx;
+		line-height: 68rpx;
+		position: relative;
+		border-radius: 10rpx;
+		font-size: 26rpx;
+		overflow: visible;
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	.tui-modal-btn::after {
+		content: " ";
+		position: absolute;
+		width: 200%;
+		height: 200%;
+		-webkit-transform-origin: 0 0;
+		transform-origin: 0 0;
+		-webkit-transform: scale(0.5, 0.5);
+		transform: scale(0.5, 0.5);
+		left: 0;
+		top: 0;
+		border-radius: 20rpx;
+	}
+
+	.tui-btn-width {
+		width: 80% !important;
+	}
+
+	.tui-primary {
+		background: #5677fc;
+		color: #fff;
+	}
+
+	.tui-primary-hover {
+		background: #4a67d6;
+		color: #e5e5e5;
+	}
+
+	.tui-primary-outline {
+		color: #5677fc;
+		background: transparent;
+	}
+
+	.tui-primary-outline::after {
+		border: 1px solid #5677fc;
+	}
+
+	.tui-danger {
+		background: #FF5B00;
+		color: #fff;
+	}
+
+	.tui-danger-hover {
+		background: #d53912;
+		color: #e5e5e5;
+	}
+
+	.tui-danger-outline {
+		color: #FF5B00;
+		background: transparent;
+	}
+
+	.tui-danger-outline::after {
+		border: 1px solid #FF5B00;
+	}
+
+	.tui-red {
+		background: #e41f19;
+		color: #fff;
+	}
+
+	.tui-red-hover {
+		background: #c51a15;
+		color: #e5e5e5;
+	}
+
+	.tui-red-outline {
+		color: #e41f19;
+		background: transparent;
+	}
+
+	.tui-red-outline::after {
+		border: 1px solid #e41f19;
+	}
+
+	.tui-warning {
+		background: #ff7900;
+		color: #fff;
+	}
+
+	.tui-warning-hover {
+		background: #e56d00;
+		color: #e5e5e5;
+	}
+
+	.tui-warning-outline {
+		color: #ff7900;
+		background: transparent;
+	}
+
+	.tui-warning-outline::after {
+		border: 1px solid #ff7900;
+	}
+
+	.tui-green {
+		background: #19be6b;
+		color: #fff;
+	}
+
+	.tui-green-hover {
+		background: #16ab60;
+		color: #e5e5e5;
+	}
+
+	.tui-green-outline {
+		color: #19be6b;
+		background: transparent;
+	}
+
+	.tui-green-outline::after {
+		border: 1px solid #19be6b;
+	}
+
+	.tui-white {
+		background: #fff;
+		color: #333;
+	}
+
+	.tui-white-hover {
+		background: #f7f7f9;
+		color: #666;
+	}
+
+	.tui-white-outline {
+		color: #333;
+		background: transparent;
+	}
+
+	.tui-white-outline::after {
+		border: 1px solid #333;
+	}
+
+	.tui-gray {
+		background: #ededed;
+		color: #999;
+	}
+
+	.tui-gray-hover {
+		background: #d5d5d5;
+		color: #898989;
+	}
+
+	.tui-gray-outline {
+		color: #999;
+		background: transparent;
+	}
+
+	.tui-gray-outline::after {
+		border: 1px solid #999;
+	}
+
+	.tui-outline-hover {
+		opacity: 0.6;
+	}
+
+	.tui-circle-btn {
+		border-radius: 40rpx !important;
+	}
+
+	.tui-circle-btn::after {
+		border-radius: 80rpx !important;
+	}
+</style>