hy-app 0.3.16 → 0.4.0

package/components/hy-tooltip/hy-tooltip.vue

@@ -1,98 +1,126 @@
 <template>
-  <view :class="['hy-tooltip', customClass]" :style="customStyle">
+  <view
+    :class="['hy-tooltip', customClass]"
+    :style="customStyle"
+    @click.stop="closeHandler"
+  >
     <HyOverlay
       :show="showTooltip && tooltipTop !== -10000 && overlay"
       :customStyle="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
-      @click="overlayClickHandler"
+      @click="closeHandler"
     ></HyOverlay>
-    <view class="hy-tooltip__wrapper">
-      <text
-        class="hy-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>
-      <HyTransition
-        mode="fade"
-        :show="showTooltip"
-        :duration="300"
-        :customStyle="{
-          position: 'absolute',
-          top: addUnit(tooltipTop),
-          zIndex: zIndex,
-          ...tooltipStyle,
-        }"
-      >
-        <view
-          class="hy-tooltip__wrapper__popup"
-          :id="tooltipId"
-          :ref="tooltipId"
-        >
+    <!-- 文本内容区域 -->
+    <view
+      class="hy-tooltip__content"
+      id="target"
+      @longpress.stop="longPressHandler"
+      @tap.stop="clickHandler"
+      :style="{
+        color: color,
+        backgroundColor:
+          bgColor && showTooltip && tooltipTop !== -10000
+            ? bgColor
+            : 'transparent',
+      }"
+    >
+      <slot v-if="$slots.default"></slot>
+      <text class="hy-tooltip__content--text" v-else>{{ text }}</text>
+    </view>
+
+    <!-- 用于获取弹窗宽高 -->
+    <view class="hy-tooltip__popup hy-tooltip__hidden" id="pos">
+      <view class="hy-tooltip__container custom-pop">
+        <view class="hy-tooltip__container--list">
           <view
-            v-if="showCopy || buttons.length"
-            class="hy-tooltip__wrapper__popup__indicator"
-            hover-class="hy-tooltip__wrapper__popup__indicator--hover"
-            :style="[
-              indicatorStyle,
-              {
-                width: addUnit(indicatorWidth),
-                height: addUnit(indicatorWidth),
-              },
-            ]"
+            v-if="showCopy"
+            class="hy-tooltip__container--list__btn"
+            hover-class="hy-tooltip__container--list__btn--hover"
+            @tap="setClipboardData"
           >
-            <!-- 由于nvue不支持三角形绘制，这里就做一个四方形，再旋转45deg，得到露出的一个三角 -->
+            <text class="hy-tooltip__container--list__btn--text">复制</text>
           </view>
-          <view class="hy-tooltip__wrapper__popup__list">
+          <HyLine
+            direction="column"
+            color="#8d8e90"
+            v-if="showCopy && buttons.length > 0"
+            length="18"
+          ></HyLine>
+          <template v-for="(item, index) in buttons" :key="index">
             <view
-              v-if="showCopy"
-              class="hy-tooltip__wrapper__popup__list__btn"
-              hover-class="hy-tooltip__wrapper__popup__list__btn--hover"
-              @tap="setClipboardData"
+              class="hy-tooltip__container--list__btn"
+              hover-class="hy-tooltip__container--list__btn--hover"
             >
-              <text class="hy-tooltip__wrapper__popup__list__btn__text"
-                >复制</text
+              <text
+                class="hy-tooltip__container--list__btn--text"
+                @tap="btnClickHandler(index)"
               >
+                {{ item }}
+              </text>
             </view>
             <HyLine
               direction="column"
               color="#8d8e90"
-              v-if="showCopy && buttons.length > 0"
+              v-if="index < buttons.length - 1"
               length="18"
             ></HyLine>
-            <template v-for="(item, index) in buttons" :key="index">
-              <view
-                class="hy-tooltip__wrapper__popup__list__btn"
-                hover-class="hy-tooltip__wrapper__popup__list__btn--hover"
-              >
-                <text
-                  class="hy-tooltip__wrapper__popup__list__btn__text"
-                  @tap="btnClickHandler(index)"
-                >
-                  {{ item }}
-                </text>
-              </view>
-              <HyLine
-                direction="column"
-                color="#8d8e90"
-                v-if="index < buttons.length - 1"
-                length="18"
-              ></HyLine>
-            </template>
-          </view>
+          </template>
         </view>
-      </HyTransition>
+      </view>
     </view>
+
+    <HyTransition
+      mode="fade"
+      :show="showTooltip"
+      :duration="300"
+      custom-class="hy-tooltip__popup"
+      :custom-style="popover.popStyle.value"
+    >
+      <view class="hy-tooltip__container">
+        <!-- 三角形 -->
+        <view
+          v-if="showCopy"
+          :class="`hy-tooltip__arrow ${popover.arrowClass.value}`"
+          :style="popover.arrowStyle.value"
+        ></view>
+        <!-- 三角形 -->
+
+        <view class="hy-tooltip__container--list">
+          <view
+            v-if="showCopy"
+            class="hy-tooltip__container--list__btn"
+            hover-class="hy-tooltip__container--list__btn--hover"
+            @tap="setClipboardData"
+          >
+            <text class="hy-tooltip__container--list__btn--text">复制</text>
+          </view>
+          <HyLine
+            direction="column"
+            color="#8d8e90"
+            v-if="showCopy && buttons.length > 0"
+            length="18"
+          ></HyLine>
+          <template v-for="(item, index) in buttons" :key="index">
+            <view
+              class="hy-tooltip__container--list__btn"
+              hover-class="hy-tooltip__container--list__btn--hover"
+            >
+              <text
+                class="hy-tooltip__container--list__btn--text"
+                @tap="btnClickHandler(index)"
+              >
+                {{ item }}
+              </text>
+            </view>
+            <HyLine
+              direction="column"
+              color="#8d8e90"
+              v-if="index < buttons.length - 1"
+              length="18"
+            ></HyLine>
+          </template>
+        </view>
+      </view>
+    </HyTransition>
   </view>
 </template>
 
@@ -108,15 +136,24 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, getCurrentInstance } from "vue";
+import {
+  ref,
+  onMounted,
+  watch,
+  inject,
+  onBeforeUnmount,
+  getCurrentInstance,
+} from "vue";
 import type { CSSProperties, PropType } from "vue";
 import type { ITooltipEmits } from "./typing";
-import { addUnit, getRect, guid, sleep } from "../../utils";
+import { type Queue, queueKey, usePopover } from "../../composables";
+import type { IPlacementVo } from "../hy-popover/typing";
+import { closeOther, removeFromQueue, pushToQueue } from "../../common";
 
 // 组件
-import HyOverlay from "../hy-overlay/hy-overlay.vue";
 import HyTransition from "../hy-transition/hy-transition.vue";
 import HyLine from "../hy-line/hy-line.vue";
+import HyOverlay from "../hy-overlay/hy-overlay.vue";
 
 /**
  * Tooltip组件主要用于长按操作，类似微信的长按气泡
@@ -141,6 +178,22 @@ const props = defineProps({
     type: [String, Number],
     default: 14,
   },
+  /**
+   * 触发模式
+   * @values longpress,click
+   * */
+  triggerMode: {
+    type: String as PropType<"longpress" | "click">,
+    default: "longpress",
+  },
+  /**
+   * 指定 popover 的放置位置
+   * @values top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end
+   * */
+  placement: {
+    type: String as PropType<IPlacementVo>,
+    default: "bottom",
+  },
   /** 字体颜色 */
   color: String,
   /** 弹出提示框时，文本的背景色 */
@@ -190,131 +243,88 @@ const props = defineProps({
 });
 const emit = defineEmits<ITooltipEmits>();
 
-const instance = getCurrentInstance();
-const showTooltip = ref<boolean>(true);
-const textId = ref(guid());
-const tooltipId = ref(guid());
+const queue = inject<Queue | null>(queueKey, null);
+const { proxy } = getCurrentInstance() as any;
+// 显示三角标
+const visibleArrow = ref<boolean>(true);
+const popover = usePopover(visibleArrow.value);
+const showTooltip = ref<boolean>(false);
 const tooltipTop = ref<number>(-10000);
-// 气泡的位置信息
-const tooltipInfo = ref<UniApp.NodeInfo>({
-  width: 0,
-  left: 0,
-});
-const textInfo = ref<UniApp.NodeInfo>({
-  width: 0,
-  left: 0,
-  right: 0,
-});
-// 三角形指示器的样式
-const indicatorStyle = ref<CSSProperties>({
-  left: 0,
-  right: 0,
+const selector: string = "tooltip";
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(props.placement, visibleArrow.value, selector);
+  },
+);
+
+watch(
+  () => showTooltip.value,
+  (newValue) => {
+    if (newValue) {
+      popover.control(props.placement, 0);
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy);
+      } else {
+        closeOther(proxy);
+      }
+    }
+  },
+);
+
+onMounted(() => {
+  // getElRect();
+  popover.init(props.placement, visibleArrow.value, selector);
 });
-// 气泡在可能超出屏幕边沿范围时，重新定位后，距离屏幕边沿的距离
-const screenGap = ref(12);
-// 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
-const indicatorWidth = ref(14);
 
-// 计算气泡和指示器的位置信息
-const tooltipStyle = computed(() => {
-  const style: CSSProperties = {
-      transform: `translateY(${props.direction === "top" ? "-100%" : "100%"})`,
-    },
-    // #ifdef APP || H5 || MP-WEIXIN
-    sysInfo = uni.getWindowInfo();
-  // #endif
-  if (
-    tooltipInfo.value.width! / 2 >
-    textInfo.value.left! + textInfo.value.width! / 2 - screenGap.value
-  ) {
-    indicatorStyle.value = {};
-    style.left = `-${addUnit(textInfo.value.left! - screenGap.value)}`;
-    indicatorStyle.value.left = addUnit(
-      textInfo.value.width! / 2 - Number(style.left) - indicatorWidth.value / 2,
-    );
-  } else if (
-    tooltipInfo.value.width! / 2 >
-    sysInfo.windowWidth -
-      textInfo.value.right! +
-      textInfo.value.width! / 2 -
-      screenGap.value
-  ) {
-    indicatorStyle.value = {};
-    style.right = `-${addUnit(sysInfo.windowWidth - textInfo.value.right! - screenGap.value)}`;
-    indicatorStyle.value.right = addUnit(
-      textInfo.value.width! / 2 -
-        Number(style.right) -
-        indicatorWidth.value / 2,
-    );
-  } else {
-    const left = Math.abs(
-      textInfo.value.width! / 2 - tooltipInfo.value.width! / 2,
-    );
-    style.left =
-      textInfo.value.width! > tooltipInfo.value.width!
-        ? addUnit(left)
-        : -addUnit(left);
-    indicatorStyle.value = {};
-  }
-  if (props.direction === "top") {
-    style.marginTop = "-10px";
-    indicatorStyle.value.bottom = "-4px";
+function onBeforeMount(param: () => void) {}
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy);
   } else {
-    style.marginBottom = "-10px";
-    indicatorStyle.value.top = "-4px";
+    pushToQueue(proxy);
   }
-  return style;
 });
 
-onMounted(() => {
-  getElRect();
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy);
+  } else {
+    removeFromQueue(proxy);
+  }
 });
 
-/**
- * @description 长按触发事件
- * */
+// 长按触发事件
 const longPressHandler = () => {
-  tooltipTop.value = 0;
-  showTooltip.value = true;
+  if (props.triggerMode === "longpress") {
+    tooltipTop.value = 0;
+    showTooltip.value = true;
+  }
 };
 
-/**
- * @description 点击透明遮罩
- * */
-const overlayClickHandler = () => {
+// 点击触发事件
+const clickHandler = () => {
+  if (props.triggerMode === "click") {
+    tooltipTop.value = 0;
+    showTooltip.value = true;
+  }
+};
+
+// 点击关闭
+const closeHandler = () => {
   showTooltip.value = false;
 };
 
-/**
- * @description 点击弹出按钮
- * */
+// 点击操作栏按钮
 const btnClickHandler = (index: number) => {
   showTooltip.value = false;
   // 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
   emit("click", props.showCopy ? index + 1 : index);
 };
 
-/**
- * @description 元素尺寸
- * */
-const getElRect = () => {
-  // 调用之前，先将指示器调整到屏幕外，方便获取尺寸
-  showTooltip.value = true;
-  tooltipTop.value = -10000;
-  sleep(500).then(() => {
-    getRect(`#${tooltipId.value}`, false, instance).then((size) => {
-      tooltipInfo.value = size as UniApp.NodeInfo;
-      // 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
-      showTooltip.value = false;
-    });
-    getRect(`#${textId.value}`, false, instance).then((size) => {
-      textInfo.value = size as UniApp.NodeInfo;
-    });
-  });
-};
-/**
- * @description 复制文本到粘贴板
- * */
+// 复制文本到粘贴板
 const setClipboardData = () => {
   // 关闭组件
   showTooltip.value = false;

package/components/hy-tooltip/index.scss

@@ -1,66 +1,90 @@
 @use "../../libs/css/theme" as *;
 @use "../../libs/css/mixin.scss" as *;
 
+$hy-tooltip--z-index: 998;
+$hy-tooltip--background-color: rgb(50, 50, 51);
+
 @include b(tooltip) {
   position: relative;
   @include flex;
 
-  &__wrapper {
-    @include flex;
-    justify-content: center;
+  @include squareArrow(6px, $hy-tooltip--background-color, $hy-tooltip--z-index, $hy-box-shadow);
+
+  @include edeep(popup) {
+    position: absolute;
+    box-sizing: border-box;
+    background-clip: padding-box;
+    text-align: center;
+    min-height: 36px;
+    z-index: $hy-tooltip--z-index;
+    transition: opacity 0.2s;
+    box-shadow: $hy-box-shadow;
+    border-radius: $hy-border-radius-sm;
+  }
+
+
+  @include e(hidden) {
+    left: -220vw;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    position: relative;
+    border-radius: $hy-border-radius-sm;
+  }
+
+  @include e(inner) {
+    position: relative;
+    padding: $hy-border-margin-padding-base;
+    line-height: 22px;
+    z-index: $hy-tooltip--z-index;
+    border-radius: $hy-border-radius-sm;
+    box-sizing: content-box;
+    width: 200px;
+  }
+
+  @include e(content) {
+    //@include flex;
+    //justify-content: center;
     /* #ifndef APP-NVUE */
     white-space: nowrap;
     /* #endif */
 
-    &__text {
-      font-size: 14px;
+    @include m(text) {
+      font-size: 28rpx;
     }
+  }
+
+  @include e(container) {
+    @include flex;
+    justify-content: center;
+
+    @include m(list) {
+      background-color: $hy-tooltip--background-color;
+      position: relative;
+      flex: 1;
+      border-radius: $hy-border-radius-sm;
+      padding: 0;
+      @include flex(row);
+      align-items: center;
+      z-index: 999;
 
-    &__popup {
-      @include flex;
-      justify-content: center;
-
-      &__list {
-        background-color: rgb(50, 50, 51);
-        position: relative;
-        flex: 1;
-        border-radius: $hy-border-radius-sm;
-        padding: 0;
-        @include flex(row);
+      @include e(btn) {
+        padding: $hy-border-margin-padding-base;
+        display: flex;
+        justify-content: center;
         align-items: center;
-        overflow: hidden;
-
-        &__btn {
-          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-base;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          &--hover {
-            background-color: $hy-background--hover;
-          }
-
-          &__text {
-            font-size: 13px;
-            color: #ffffff;
-          }
+
+        @include m(hover) {
+          background-color: $hy-background--hover;
         }
-      }
 
-      &__indicator {
-        position: absolute;
-        background-color: rgb(50, 50, 51);
-        width: 14px;
-        height: 14px;
-        bottom: -4px;
-        transform: rotate(45deg);
-        border-radius: 2px;
-        z-index: -1;
-
-        &--hover {
-          background-color: $hy-text-color--hover;
+        @include m(text) {
+          font-size: 13px;
+          color: #ffffff;
         }
       }
     }
+
   }
 }

package/components/hy-upload/hy-upload.vue

@@ -3,7 +3,7 @@
     <view class="hy-upload__wrap">
       <template v-if="previewImage">
         <view
-          class="hy-upload__wrap__preview"
+          class="hy-upload__wrap--preview"
           v-for="(item, index) in lists"
           :key="index"
         >
@@ -11,7 +11,7 @@
             v-if="item.isImage || (item.type && item.type === 'image')"
             :src="item.thumb || item.url"
             :mode="imageMode"
-            class="hy-upload__wrap__preview__image"
+            class="hy-upload__wrap--preview__image"
             @tap="onPreviewImage(item, index)"
             :style="[
               {
@@ -22,7 +22,7 @@
           />
           <view
             v-else
-            class="hy-upload__wrap__preview__other"
+            class="hy-upload__wrap--preview__other"
             @tap="onClickPreview(item, index)"
           >
             <HyIcon
@@ -34,7 +34,7 @@
                   : 'folder'
               "
             ></HyIcon>
-            <text class="hy-upload__wrap__preview__other__text">
+            <text class="hy-upload__wrap--preview__other--text">
               {{
                 item.isVideo || (item.type && item.type === "video")
                   ? "视频"
@@ -44,14 +44,19 @@
           </view>
 
           <!-- 上传进度条	-->
-          <view class="material-sent" v-if="item.status === 'loading'">
+          <view
+            class="hy-upload__wrap--preview__progress"
+            v-if="item.status === 'loading'"
+          >
             <progress
-              class="select-tips"
+              class="hy-upload__wrap--preview__progress--number"
               :percent="item.schedule"
               stroke-width="4"
               activeColor="#B99C65"
             />
-            <view class="tips-text">上传进度{{ item.schedule }}%</view>
+            <view class="hy-upload__wrap--preview__progress--value"
+              >上传进度{{ item.schedule }}%</view
+            >
           </view>
           <!-- 上传进度条	-->
 
@@ -61,7 +66,7 @@
             v-if="item.status !== 'loading' && (deletable || item.deletable)"
             @tap.stop="deleteItem(index)"
           >
-            <view class="hy-upload__deletable__icon">
+            <view class="hy-upload__deletable--icon">
               <HyIcon
                 :name="IconConfig.CLOSE"
                 color="#ffffff"
@@ -74,7 +79,7 @@
           <!-- 上传成功图标 -->
           <view class="hy-upload__success" v-if="item.status === 'success'">
             <!-- #ifndef APP-NVUE -->
-            <view class="hy-upload__success__icon">
+            <view class="hy-upload__success--icon">
               <HyIcon
                 :name="IconConfig.CHECK_MASK"
                 color="#ffffff"
@@ -116,7 +121,7 @@
             size="26"
             :color="uploadIconColor"
           ></HyIcon>
-          <text v-if="uploadText" class="hy-upload__button__text">{{
+          <text v-if="uploadText" class="hy-upload__button--text">{{
             uploadText
           }}</text>
         </view>