修复权限弹窗

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

@@ -1,376 +1,403 @@
 <template>
-	<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">
+    <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">
                         <!-- :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 v-else>
-				<slot></slot>
-			</view>
-		</view>
-		<view class="tui-modal-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickCancel"></view>
-
-	</view>
+                        <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 v-else><slot></slot></view>
+        </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%'
-			},
-			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: 'danger',
-						plain: true //是否空心
-					}, {
-						text: '确定',
-						type: 'danger',
-						plain: false
-					}]
-				}
-			},
-			//点击遮罩 是否可关闭
-			maskClosable: {
-				type: Boolean,
-				default: true
-			},
-			//淡入效果，自定义弹框插入input输入框时传true
-			fadeIn: {
-				type: Boolean,
-				default: false
-			},
-			//自定义弹窗内容
-			custom: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-
-			}
-		},
-		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')
-			}
-		}
-	}
+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: 'danger',
+                        plain: true //是否空心
+                    },
+                    {
+                        text: '确定',
+                        type: 'danger',
+                        plain: false
+                    }
+                ]
+            }
+        },
+        //点击遮罩 是否可关闭
+        maskClosable: {
+            type: Boolean,
+            default: true
+        },
+        //淡入效果，自定义弹框插入input输入框时传true
+        fadeIn: {
+            type: Boolean,
+            default: false
+        },
+        //自定义弹窗内容
+        custom: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {}
+    },
+    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-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: #E15616;
-		color: #fff;
-	}
-
-	.tui-danger-hover {
-		background: #d53912;
-		color: #e5e5e5;
-	}
-
-	.tui-danger-outline {
-		color: #E15616;
-		background: transparent;
-	}
-
-	.tui-danger-outline::after {
-		border: 1px solid #E15616;
-	}
-
-	.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;
-	}
+.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: #e15616;
+    color: #fff;
+}
+
+.tui-danger-hover {
+    background: #d53912;
+    color: #e5e5e5;
+}
+
+.tui-danger-outline {
+    color: #e15616;
+    background: transparent;
+}
+
+.tui-danger-outline::after {
+    border: 1px solid #e15616;
+}
+
+.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>