123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227 |
- <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';
-
- {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')
- },
-
-
-
-
-
- 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>
|