From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Mon, 06 Nov 2023 08:48:39 +0800 Subject: [PATCH] fix:小程序订阅消息 --- uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue | 365 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 365 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue b/uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue new file mode 100644 index 0000000..4bd8fc9 --- /dev/null +++ b/uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue @@ -0,0 +1,365 @@ +<template> + <view + class="u-tooltip" + :style="[$u.addStyle(customStyle)]" + > + <u-overlay + :show="showTooltip && tooltipTop !== -10000 && overlay" + customStyle="backgroundColor: rgba(0, 0, 0, 0)" + @click="overlayClickHandler" + ></u-overlay> + <view class="u-tooltip__wrapper"> + <text + class="u-tooltip__wrapper__text" + :id="textId" + :ref="textId" + :userSelect="false" + :selectable="false" + @longpress.stop="longpressHandler" + :style="{ + color: color, + backgroundColor: bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent' + }" + >{{ text }}</text> + <u-transition + mode="fade" + :show="showTooltip" + duration="300" + :customStyle="{ + position: 'absolute', + top: $u.addUnit(tooltipTop), + zIndex: zIndex, + ...tooltipStyle + }" + > + <view + class="u-tooltip__wrapper__popup" + :id="tooltipId" + :ref="tooltipId" + > + <view + class="u-tooltip__wrapper__popup__indicator" + hover-class="u-tooltip__wrapper__popup__indicator--hover" + v-if="showCopy || buttons.length" + :style="[indicatorStyle, { + width: $u.addUnit(indicatorWidth), + height: $u.addUnit(indicatorWidth), + }]" + > + <!-- ������nvue������������������������������������������������������������������45deg������������������������������ --> + </view> + <view class="u-tooltip__wrapper__popup__list"> + <view + v-if="showCopy" + class="u-tooltip__wrapper__popup__list__btn" + hover-class="u-tooltip__wrapper__popup__list__btn--hover" + @tap="setClipboardData" + > + <text + class="u-tooltip__wrapper__popup__list__btn__text" + >������</text> + </view> + <u-line + direction="column" + color="#8d8e90" + v-if="showCopy && buttons.length > 0" + length="18" + ></u-line> + <block v-for="(item , index) in buttons" :key="index"> + <view + class="u-tooltip__wrapper__popup__list__btn" + hover-class="u-tooltip__wrapper__popup__list__btn--hover" + > + <text + class="u-tooltip__wrapper__popup__list__btn__text" + @tap="btnClickHandler(index)" + >{{ item }}</text> + </view> + <u-line + direction="column" + color="#8d8e90" + v-if="index < buttons.length - 1" + length="18" + ></u-line> + </block> + </view> + </view> + </u-transition> + </view> + </view> +</template> + +<script> + import props from './props.js'; + // #ifdef APP-NVUE + const dom = uni.requireNativePlugin('dom') + // #endif + // #ifdef H5 + import ClipboardJS from "./clipboard.min.js" + // #endif + /** + * Tooltip + * @description + * @tutorial https://www.uviewui.com/components/tooltip.html + * @property {String | Number} text ��������������������������� + * @property {String | Number} copyText ���������������������������������������������������������text��� + * @property {String | Number} size ��������������������� 14 ��� + * @property {String} color ��������������������� '#606266' ��� + * @property {String} bgColor ������������������������������������������������ 'transparent' ��� + * @property {String} direction ������������������������top-���������bottom-��������������� 'top' ��� + * @property {String | Number} zIndex ���������������z-index���nvue��������������� 10071 ��� + * @property {Boolean} showCopy ��������������������������������� true ��� + * @property {Array} buttons ������������������ + * @property {Boolean} overlay ������������������������������������������������������ true ��� + * @property {Object} customStyle ��������������������������������� + * + * @event {Function} + * @example + */ + export default { + name: 'u-tooltip', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + // ������������������ + showTooltip: true, + // ������������id������������������������������������������������ + textId: uni.$u.guid(), + tooltipId: uni.$u.guid(), + // ��������������������������������������������������������������������������������������� + tooltipTop: -10000, + // ��������������������� + tooltipInfo: { + width: 0, + left: 0 + }, + // ��������������������� + textInfo: { + width: 0, + left: 0 + }, + // ��������������������������� + indicatorStyle: {}, + // ������������������������������������������������������������������������������������������ + screenGap: 12, + // ��������������������������������������������������������������������������������������������������������������������������������� + indicatorWidth: 14, + } + }, + watch: { + propsChange() { + this.getElRect() + } + }, + computed: { + // ������������H5������������������H5���������������������������������������������H5������ + // ������������������������������������������������������������������������������������ + propsChange() { + return [this.text, this.buttons] + }, + // ��������������������������������������� + tooltipStyle() { + const style = { + transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`, + }, + sys = uni.$u.sys(), + getPx = uni.$u.getPx, + addUnit = uni.$u.addUnit + if (this.tooltipInfo.width / 2 > this.textInfo.left + this.textInfo.width / 2 - this.screenGap) { + this.indicatorStyle = {} + style.left = `-${addUnit(this.textInfo.left - this.screenGap)}` + this.indicatorStyle.left = addUnit(this.textInfo.width / 2 - getPx(style.left) - this.indicatorWidth / + 2) + } else if (this.tooltipInfo.width / 2 > sys.windowWidth - this.textInfo.right + this.textInfo.width / 2 - + this.screenGap) { + this.indicatorStyle = {} + style.right = `-${addUnit(sys.windowWidth - this.textInfo.right - this.screenGap)}` + this.indicatorStyle.right = addUnit(this.textInfo.width / 2 - getPx(style.right) - this + .indicatorWidth / 2) + } else { + const left = Math.abs(this.textInfo.width / 2 - this.tooltipInfo.width / 2) + style.left = this.textInfo.width > this.tooltipInfo.width ? addUnit(left) : -addUnit(left) + this.indicatorStyle = {} + } + if (this.direction === 'top') { + style.marginTop = '-10px' + this.indicatorStyle.bottom = '-4px' + } else { + style.marginBottom = '-10px' + this.indicatorStyle.top = '-4px' + } + return style + } + }, + mounted() { + this.init() + }, + methods: { + init() { + this.getElRect() + }, + // ������������������ + async longpressHandler() { + this.tooltipTop = 0 + this.showTooltip = true + }, + // ������������������ + overlayClickHandler() { + this.showTooltip = false + }, + // ������������������ + btnClickHandler(index) { + this.showTooltip = false + // ���������������������������������������index���������1��������������������������������������� + this.$emit('click', this.showCopy ? index + 1 : index) + }, + // ������������������ + queryRect(ref) { + // #ifndef APP-NVUE + // $uGetRect���uView���������������������������������������������������������https://www.uviewui.com/js/getRect.html + // ���������������������this.$uGetRect���������������uni.$u.getRect������������������������������������ + return new Promise(resolve => { + this.$uGetRect(`#${ref}`).then(size => { + resolve(size) + }) + }) + // #endif + + // #ifdef APP-NVUE + // nvue������������dom������������������������ + // ������������promise���������������������������������������then������ + return new Promise(resolve => { + dom.getComponentRect(this.$refs[ref], res => { + resolve(res.size) + }) + }) + // #endif + }, + // ������������ + getElRect() { + // ��������������������������������������������������������������������� + this.showTooltip = true + this.tooltipTop = -10000 + uni.$u.sleep(500).then(() => { + this.queryRect(this.tooltipId).then(size => { + this.tooltipInfo = size + // ������������������������������������������������������������������������������������������������������������������ + this.showTooltip = false + }) + this.queryRect(this.textId).then(size => { + this.textInfo = size + }) + }) + }, + // ������������������������ + setClipboardData() { + // ������������ + this.showTooltip = false + this.$emit('click', 0) + // #ifndef H5 + uni.setClipboardData({ + // ������������copyText���������������������������������������text��������������������������� + data: this.copyText || this.text, + success: () => { + this.showToast && uni.$u.toast('������������') + }, + fail: () => { + this.showToast && uni.$u.toast('������������') + }, + complete: () => { + this.showTooltip = false + } + }) + // #endif + + // #ifdef H5 + let event = window.event || e || {} + let clipboard = new ClipboardJS('', { + text: () => this.copyText || this.text + }) + clipboard.on('success', (e) => { + this.showToast && uni.$u.toast('������������') + clipboard.off('success') + clipboard.off('error') + // ���������������������������������DOM��������� + clipboard.destroy() + }) + clipboard.on('error', (e) => { + this.showToast && uni.$u.toast('������������') + clipboard.off('success') + clipboard.off('error') + // ���������������������������������DOM��������� + clipboard.destroy() + }) + clipboard.onClick(event) + // #endif + } + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + .u-tooltip { + position: relative; + @include flex; + + &__wrapper { + @include flex; + justify-content: center; + /* #ifndef APP-NVUE */ + white-space: nowrap; + /* #endif */ + + &__text { + font-size: 14px; + } + + &__popup { + @include flex; + justify-content: center; + + &__list { + background-color: #060607; + position: relative; + flex: 1; + border-radius: 5px; + padding: 0px 0; + @include flex(row); + align-items: center; + overflow: hidden; + + &__btn { + padding: 11px 13px; + + &--hover { + background-color: #58595B; + } + + &__text { + line-height: 12px; + font-size: 13px; + color: #FFFFFF; + } + } + } + + &__indicator { + position: absolute; + background-color: #060607; + width: 14px; + height: 14px; + bottom: -4px; + transform: rotate(45deg); + border-radius: 2px; + z-index: -1; + + &--hover { + background-color: #58595B; + } + } + } + } + } +</style> -- Gitblit v1.8.0