From 66d2c8d8c97e19fdbd969f97dd3d6a28f27c415f Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 01 Nov 2023 16:07:03 +0800 Subject: [PATCH] fix:小程序分享功能和秒级数据 --- uni_modules/uview-ui/components/u-popup/u-popup.vue | 304 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 304 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-popup/u-popup.vue b/uni_modules/uview-ui/components/u-popup/u-popup.vue new file mode 100644 index 0000000..2ca51cc --- /dev/null +++ b/uni_modules/uview-ui/components/u-popup/u-popup.vue @@ -0,0 +1,304 @@ +<template> + <view class="u-popup"> + <u-overlay + :show="show" + @click="overlayClick" + v-if="overlay" + :duration="overlayDuration" + :customStyle="overlayStyle" + :opacity="overlayOpacity" + ></u-overlay> + <u-transition + :show="show" + :customStyle="transitionStyle" + :mode="position" + :duration="duration" + @afterEnter="afterEnter" + @click="clickHandler" + > + <view + class="u-popup__content" + :style="[contentStyle]" + @tap.stop="noop" + > + <u-status-bar v-if="safeAreaInsetTop"></u-status-bar> + <slot></slot> + <view + v-if="closeable" + @tap.stop="close" + class="u-popup__content__close" + :class="['u-popup__content__close--' + closeIconPos]" + hover-class="u-popup__content__close--hover" + hover-stay-time="150" + > + <u-icon + name="close" + color="#909399" + size="18" + bold + ></u-icon> + </view> + <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom> + </view> + </u-transition> + </view> +</template> + +<script> + import props from './props.js'; + + /** + * popup ������ + * @description ������������������������������������������������������������������������������������������������������������������������������������������������������������������ + * @tutorial https://www.uviewui.com/components/popup.html + * @property {Boolean} show ������������������ (������ false ) + * @property {Boolean} overlay ������������������ ��������� true ��� + * @property {String} mode ��������������������� 'bottom' ��� + * @property {String | Number} duration ���������������������ms ��������� 300 ��� + * @property {String | Number} overlayDuration ������������������������������ms ��������� 350 ��� + * @property {Boolean} closeable ��������������������������������� false ��� + * @property {Object | String} overlayStyle ������������������������ + * @property {String | Number} overlayOpacity ������������������0-1��������������� 0.5��� + * @property {Boolean} closeOnClickOverlay ������������������������������ ��������� true ��� + * @property {String | Number} zIndex ������ ��������� 10075 ��� + * @property {Boolean} safeAreaInsetBottom ���������iPhoneX������������������������ ��������� true ��� + * @property {Boolean} safeAreaInsetTop ��������������������������������������������������� ��������� false ��� + * @property {String} closeIconPos ������������������������������������ 'top-right' ��� + * @property {String | Number} round ������������������ 0��� + * @property {Boolean} zoom ���mode=center��� ��������������������������� true ��� + * @property {Object} customStyle ������������������������������ + * @event {Function} open ��������������� + * @event {Function} close ��������������� + * @example <u-popup v-model="show"><text>���������������������������������������</text></u-popup> + */ + export default { + name: 'u-popup', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + overlayDuration: this.duration + 50 + } + }, + watch: { + show(newValue, oldValue) { + if (newValue === true) { + // #ifdef MP-WEIXIN + const children = this.$children + this.retryComputedComponentRect(children) + // #endif + } + } + }, + computed: { + transitionStyle() { + const style = { + zIndex: this.zIndex, + position: 'fixed', + display: 'flex', + } + style[this.mode] = 0 + if (this.mode === 'left') { + return uni.$u.deepMerge(style, { + bottom: 0, + top: 0, + }) + } else if (this.mode === 'right') { + return uni.$u.deepMerge(style, { + bottom: 0, + top: 0, + }) + } else if (this.mode === 'top') { + return uni.$u.deepMerge(style, { + left: 0, + right: 0 + }) + } else if (this.mode === 'bottom') { + return uni.$u.deepMerge(style, { + left: 0, + right: 0, + }) + } else if (this.mode === 'center') { + return uni.$u.deepMerge(style, { + alignItems: 'center', + 'justify-content': 'center', + top: 0, + left: 0, + right: 0, + bottom: 0 + }) + } + }, + contentStyle() { + const style = {} + // ���������������������safeAreaInsets������������������������������������������������������������������������ + // ���������css������������������nvue���������css���iPhoneX��������������������� + const { + safeAreaInsets + } = uni.$u.sys() + if (this.mode !== 'center') { + style.flex = 1 + } + // ���������������������������������transparent������������������������������ + if (this.bgColor) { + style.backgroundColor = this.bgColor + } + if(this.round) { + const value = uni.$u.addUnit(this.round) + if(this.mode === 'top') { + style.borderBottomLeftRadius = value + style.borderBottomRightRadius = value + } else if(this.mode === 'bottom') { + style.borderTopLeftRadius = value + style.borderTopRightRadius = value + } else if(this.mode === 'center') { + style.borderRadius = value + } + } + return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) + }, + position() { + if (this.mode === 'center') { + return this.zoom ? 'fade-zoom' : 'fade' + } + if (this.mode === 'left') { + return 'slide-left' + } + if (this.mode === 'right') { + return 'slide-right' + } + if (this.mode === 'bottom') { + return 'slide-up' + } + if (this.mode === 'top') { + return 'slide-down' + } + }, + }, + methods: { + // ������������ + overlayClick() { + if (this.closeOnClickOverlay) { + this.$emit('close') + } + }, + close(e) { + this.$emit('close') + }, + afterEnter() { + this.$emit('open') + }, + clickHandler() { + // ���������������������������u-transition������������������������������������������������������������������������������������������������������������������������ + if(this.mode === 'center') { + this.overlayClick() + } + this.$emit('click') + }, + // #ifdef MP-WEIXIN + retryComputedComponentRect(children) { + // ��������������������������������������� + const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list', + 'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list', + 'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar', + 'u-tabs', 'u-tooltip' + ] + // ������������������������������ + for (let i = 0; i < children.length; i++) { + const child = children[i] + // ��������������������������� + const grandChild = child.$children + // ���������������������������������������������������������������������������init������������������������ + if (names.includes(child.$options.name) && typeof child?.init === 'function') { + // ��������������������������������������������������������������� + uni.$u.sleep(50).then(() => { + child.init() + }) + } + // ��������������������������������������������������� + if (grandChild.length) { + this.retryComputedComponentRect(grandChild) + } + } + } + // #endif + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + $u-popup-flex:1 !default; + $u-popup-content-background-color: #fff !default; + + .u-popup { + flex: $u-popup-flex; + + &__content { + background-color: $u-popup-content-background-color; + position: relative; + + &--round-top { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + + &--round-left { + border-top-left-radius: 0; + border-top-right-radius: 10px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 10px; + } + + &--round-right { + border-top-left-radius: 10px; + border-top-right-radius: 0; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 0; + } + + &--round-bottom { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + &--round-center { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + + &__close { + position: absolute; + + &--hover { + opacity: 0.4; + } + } + + &__close--top-left { + top: 15px; + left: 15px; + } + + &__close--top-right { + top: 15px; + right: 15px; + } + + &__close--bottom-left { + bottom: 15px; + left: 15px; + } + + &__close--bottom-right { + right: 15px; + bottom: 15px; + } + } + } +</style> -- Gitblit v1.8.0