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-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