From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 01 Mar 2024 09:58:45 +0800 Subject: [PATCH] fix:手持设备 --- uni_modules/uview-ui/components/u-modal/u-modal.vue | 227 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 227 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-modal/u-modal.vue b/uni_modules/uview-ui/components/u-modal/u-modal.vue new file mode 100644 index 0000000..2cbc737 --- /dev/null +++ b/uni_modules/uview-ui/components/u-modal/u-modal.vue @@ -0,0 +1,227 @@ +<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-modal :show="true" title="title" content="content"></u-modal> + */ + 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> -- Gitblit v1.8.0