You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
227 lines
6.8 KiB
227 lines
6.8 KiB
<template> |
|
<u-popup |
|
mode="center" |
|
:zoom="zoom" |
|
:show="show" |
|
:customStyle="{ |
|
borderRadius: '6px', |
|
overflow: 'hidden', |
|
marginTop: `-${$u.addUnit(negativeTop)}` |
|
}" |
|
:closeOnClickOverlay="closeOnClickOverlay" |
|
:safeAreaInsetBottom="false" |
|
:duration="400" |
|
@click="clickHandler" |
|
> |
|
<view |
|
class="u-modal" |
|
:style="{ |
|
width: $u.addUnit(width), |
|
}" |
|
> |
|
<text |
|
class="u-modal__title" |
|
v-if="title" |
|
>{{ title }}</text> |
|
<view |
|
class="u-modal__content" |
|
:style="{ |
|
paddingTop: `${title ? 12 : 25}px` |
|
}" |
|
> |
|
<slot> |
|
<text class="u-modal__content__text">{{ 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> |
|
</u-popup> |
|
</template> |
|
|
|
<script> |
|
import props from './props.js'; |
|
/** |
|
* Modal 模态框 |
|
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。 |
|
* @tutorial https://www.uviewui.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 确认按钮的样式,如设置，将不会显示取消按钮 |
|
* @event {Function} confirm 点击确认按钮时触发 |
|
* @event {Function} cancel 点击取消按钮时触发 |
|
* @event {Function} close 点击遮罩关闭出发，closeOnClickOverlay为true有效 |
|
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" /> |
|
*/ |
|
export default { |
|
name: 'u-modal', |
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|
data() { |
|
return { |
|
loading: false |
|
} |
|
}, |
|
watch: { |
|
show(n) { |
|
// 为了避免第一次打开modal，又使用了异步关闭的loading |
|
// 第二次打开modal时，loading依然存在的情况 |
|
if (n && this.loading) this.loading = false |
|
} |
|
}, |
|
methods: { |
|
// 点击确定按钮 |
|
confirmHandler() { |
|
// 如果配置了异步关闭，将按钮值为loading状态 |
|
if (this.asyncClose) { |
|
this.loading = true; |
|
} |
|
this.$emit('confirm') |
|
}, |
|
// 点击取消按钮 |
|
cancelHandler() { |
|
this.$emit('cancel') |
|
}, |
|
// 点击遮罩 |
|
// 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩 |
|
// 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中 |
|
// 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在 |
|
// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发 |
|
clickHandler() { |
|
if (this.closeOnClickOverlay) { |
|
this.$emit('close') |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../libs/css/components.scss"; |
|
$u-modal-border-radius: 6px; |
|
|
|
.u-modal { |
|
width: 650rpx; |
|
border-radius: $u-modal-border-radius; |
|
overflow: hidden; |
|
|
|
&__title { |
|
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>
|
|
|