a2702f6d
 刘淇
巡查计划
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
|
<template>
<u-popup
mode="center"
:zoom="zoom"
:show="show"
:class="[customClass]"
:customStyle="{
borderRadius: '6px',
overflow: 'hidden',
marginTop: `-${addUnit(negativeTop)}`
}"
:closeOnClickOverlay="closeOnClickOverlay"
:safeAreaInsetBottom="false"
:duration="duration"
@click="clickHandler"
>
<view
class="u-modal"
:style="{
width: addUnit(width),
}"
>
<view
class="u-modal__title"
v-if="title"
>{{ title }}</view>
<view
class="u-modal__content"
:style="contentStyleCpu"
>
<slot>
<text class="u-modal__content__text" :style="{textAlign: contentTextAlign}">
{{ content }}
</text>
</slot>
</view>
<view
class="u-modal__button-group--confirm-button"
v-if="$slots.confirmButton"
>
<slot name="confirmButton"></slot>
</view>
<template v-else>
<u-line></u-line>
<view
class="u-modal__button-group"
:style="{
flexDirection: buttonReverse ? 'row-reverse' : 'row'
}"
>
<view
class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
:hover-stay-time="150"
hover-class="u-modal__button-group__wrapper--hover"
:class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
v-if="showCancelButton"
@tap="cancelHandler"
>
<text
class="u-modal__button-group__wrapper__text"
:style="{
color: cancelColor
}"
>{{ cancelText }}</text>
</view>
<u-line
direction="column"
v-if="showConfirmButton && showCancelButton"
></u-line>
<view
class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
:hover-stay-time="150"
hover-class="u-modal__button-group__wrapper--hover"
:class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
v-if="showConfirmButton"
@tap="confirmHandler"
>
<u-loading-icon v-if="loading"></u-loading-icon>
<text
v-else
class="u-modal__button-group__wrapper__text"
:style="{
color: confirmColor
}"
>{{ confirmText }}</text>
</view>
</view>
</template>
</view>
<template #bottom>
<slot name="popupBottom"></slot>
</template>
</u-popup>
</template>
<script>
import { props } from './props';
import { mpMixin } from '../../libs/mixin/mpMixin';
import { mixin } from '../../libs/mixin/mixin';
import { addUnit } from '../../libs/function/index';
/**
* Modal 模态框
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
* @tutorial https://uview-plus.jiangruyi.com/components/modul.html
* @property {Boolean} show 是否显示模态框，请赋值给show （默认 false ）
* @property {String} title 标题内容
* @property {String} content 模态框内容，如传入slot内容，则此参数无效
* @property {String} confirmText 确认按钮的文字 （默认 '确认' ）
* @property {String} cancelText 取消按钮的文字 （默认 '取消' ）
* @property {Boolean} showConfirmButton 是否显示确认按钮 （默认 true ）
* @property {Boolean} showCancelButton 是否显示取消按钮 （默认 false ）
* @property {String} confirmColor 确认按钮的颜色 （默认 '#2979ff' ）
* @property {String} cancelColor 取消按钮的颜色 （默认 '#606266' ）
* @property {Boolean} buttonReverse 对调确认和取消的位置 （默认 false ）
* @property {Boolean} zoom 是否开启缩放模式 （默认 true ）
* @property {Boolean} asyncClose 是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭Modal （默认 false ）
* @property {String | Number} negativeTop 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
* @property {String | Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
* @property {String} confirmButtonShape 确认按钮的样式,如设置，将不会显示取消按钮
* @property {Number} duration 弹窗动画过度时间 （默认 400 ）
* @event {Function} confirm 点击确认按钮时触发
* @event {Function} cancel 点击取消按钮时触发
* @event {Function} close 点击遮罩关闭出发，closeOnClickOverlay为true有效
* @example <u-modal :show="show" />
*/
export default {
name: 'u-modal',
mixins: [mpMixin, mixin, props],
data() {
return {
loading: false
}
},
watch: {
show(n) {
// 为了避免第一次打开modal，又使用了异步关闭的loading
// 第二次打开modal时，loading依然存在的情况
if (n && this.loading) this.loading = false
}
},
emits: ["confirm", "cancel", "close", "update:show", 'cancelOnAsync'],
computed: {
contentStyleCpu() {
let style = this.contentStyle;
style.paddingTop = `${this.title ? 12 : 25}px`
return style;
}
},
methods: {
addUnit,
// 点击确定按钮
confirmHandler() {
// 如果配置了异步关闭，将按钮值为loading状态
if (this.asyncClose) {
this.loading = true;
} else {
this.$emit('update:show', false)
}
this.$emit('confirm')
},
// 点击取消按钮
cancelHandler() {
// 如果点击了确定按钮，确定按钮正在请求接口执行异步操作，那么限制不能取消。
if (this.asyncClose && this.loading) {
if (this.asyncCloseTip) {
uni.showToast({
title: this.asyncCloseTip,
icon: 'none'
});
}
this.$emit('cancelOnAsync')
} else {
// 如果配置了取消时异步关闭
if (!this.asyncCancelClose) {
this.$emit('update:show', false)
}
}
this.$emit('cancel')
},
// 点击遮罩
// 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩
// 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中
// 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
clickHandler() {
if (this.closeOnClickOverlay) {
this.$emit('update:show', false)
this.$emit('close')
}
}
}
}
</script>
<style lang="scss" scoped>
$u-modal-border-radius: 6px;
.u-modal {
width: 650rpx;
border-radius: $u-modal-border-radius;
overflow: hidden;
&__title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
color: $u-content-color;
text-align: center;
padding-top: 25px;
}
&__content {
padding: 12px 25px 25px 25px;
@include flex;
justify-content: center;
&__text {
font-size: 15px;
color: $u-content-color;
flex: 1;
}
}
&__button-group {
@include flex;
&--confirm-button {
flex-direction: column;
padding: 0px 25px 15px 25px;
}
&__wrapper {
flex: 1;
@include flex;
justify-content: center;
align-items: center;
height: 48px;
&--confirm,
&--only-cancel {
border-bottom-right-radius: $u-modal-border-radius;
}
&--cancel,
&--only-confirm {
border-bottom-left-radius: $u-modal-border-radius;
}
&--hover {
background-color: $u-bg-color;
}
&__text {
color: $u-content-color;
font-size: 16px;
text-align: center;
}
}
}
}
</style>
|
