bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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