hy-app 0.2.13 → 0.2.15

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="hy-tooltip" :style="customStyle">
+  <view :class="['hy-tooltip', customClass]" :style="customStyle">
     <HyOverlay
       :show="showTooltip && tooltipTop !== -10000 && overlay"
       :customStyle="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
@@ -16,12 +16,11 @@
         :style="{
           color: color,
           backgroundColor:
-            bgColor && showTooltip && tooltipTop !== -10000
-              ? bgColor
-              : 'transparent',
+            bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent',
         }"
-        >{{ text }}</text
       >
+        {{ text }}
+      </text>
       <HyTransition
         mode="fade"
         :show="showTooltip"
@@ -33,11 +32,7 @@
           ...tooltipStyle,
         }"
       >
-        <view
-          class="hy-tooltip__wrapper__popup"
-          :id="tooltipId"
-          :ref="tooltipId"
-        >
+        <view class="hy-tooltip__wrapper__popup" :id="tooltipId" :ref="tooltipId">
           <view
             v-if="showCopy || buttons.length"
             class="hy-tooltip__wrapper__popup__indicator"
@@ -59,9 +54,7 @@
               hover-class="hy-tooltip__wrapper__popup__list__btn--hover"
               @tap="setClipboardData"
             >
-              <text class="hy-tooltip__wrapper__popup__list__btn__text"
-                >复制</text
-              >
+              <text class="hy-tooltip__wrapper__popup__list__btn__text">复制</text>
             </view>
             <HyLine
               direction="column"
@@ -77,8 +70,9 @@
                 <text
                   class="hy-tooltip__wrapper__popup__list__btn__text"
                   @tap="btnClickHandler(index)"
-                  >{{ item }}</text
                 >
+                  {{ item }}
+                </text>
               </view>
               <HyLine
                 direction="column"
@@ -95,13 +89,18 @@
 </template>
 
 <script lang="ts">
+/**
+ * Tooltip组件主要用于长按操作，类似微信的长按气泡
+ * @displayName hy-tooltip
+ */
+defineOptions({})
 export default {
   name: 'hy-tooltip',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
@@ -111,180 +110,225 @@ import {
   type CSSProperties,
   toRefs,
   ref,
-  onMounted, getCurrentInstance,
-} from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit, getRect, guid, sleep } from "../../utils";
+  onMounted,
+  getCurrentInstance,
+  type PropType,
+} from 'vue'
+import type { ITooltipEmits } from './typing'
+import { addUnit, getRect, guid, sleep } from '../../utils'
 
 // 组件
-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'
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyLine from '../hy-line/hy-line.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { showToast, copyText, text, showCopy, buttons, direction } =
-  toRefs(props);
-const emit = defineEmits(["click"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 需要显示的提示文字 */
+  text: String,
+  /** 点击复制按钮时，复制的文本，为空则使用text值 */
+  copyText: String,
+  /** 文本大小 */
+  size: {
+    type: [String, Number],
+    default: 14,
+  },
+  /** 字体颜色 */
+  color: String,
+  /** 弹出提示框时，文本的背景色 */
+  bgColor: {
+    type: String,
+    default: 'transparent',
+  },
+  /**
+   * 弹出提示的方向
+   * @values top,bottom
+   * */
+  direction: {
+    type: String,
+    default: 'top',
+  },
+  /** 弹出提示的z-index，nvue无效 */
+  zIndex: {
+    type: Number,
+    default: 10071,
+  },
+  /** 是否显示复制按钮 */
+  showCopy: {
+    type: Boolean,
+    default: true,
+  },
+  /** 扩展的按钮组 */
+  buttons: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  /** 是否显示透明遮罩以防止触摸穿透 */
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示遮罩 */
+  showToast: {
+    type: Boolean,
+    default: true,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { showToast, copyText, text, showCopy, buttons, direction } = toRefs(props)
+const emit = defineEmits<ITooltipEmits>()
 
-const instance = getCurrentInstance();
-const showTooltip = ref<boolean>(true);
-const textId = ref(guid());
-const tooltipId = ref(guid());
-const tooltipTop = ref<number>(-10000);
+const instance = getCurrentInstance()
+const showTooltip = ref<boolean>(true)
+const textId = ref(guid())
+const tooltipId = ref(guid())
+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 screenGap = ref(12);
+const screenGap = ref(12)
 // 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
-const indicatorWidth = ref(14);
+const indicatorWidth = ref(14)
 
 // 特别处理H5的复制，因为H5浏览器是自带系统复制功能的，在H5环境
 // 当一些依赖参数变化时，需要重新计算气泡和指示器的位置信息
 const propsChange = computed(() => {
-  return [text.value, buttons.value];
-});
+  return [text.value, buttons.value]
+})
 // 计算气泡和指示器的位置信息
 const tooltipStyle = computed(() => {
   const style: CSSProperties = {
-      transform: `translateY(${direction.value === "top" ? "-100%" : "100%"})`,
+      transform: `translateY(${direction.value === 'top' ? '-100%' : '100%'})`,
     },
     // #ifdef APP || H5 || MP-WEIXIN
-    sysInfo = uni.getWindowInfo();
+    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 = {}
+    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
+    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 = {}
+    style.right = `-${addUnit(sysInfo.windowWidth - textInfo.value.right! - screenGap.value)}`
     indicatorStyle.value.right = addUnit(
-      textInfo.value.width! / 2 -
-        Number(style.right) -
-        indicatorWidth.value / 2,
-    );
+      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 = {};
+    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 (direction.value === "top") {
-    style.marginTop = "-10px";
-    indicatorStyle.value.bottom = "-4px";
+  if (direction.value === 'top') {
+    style.marginTop = '-10px'
+    indicatorStyle.value.bottom = '-4px'
   } else {
-    style.marginBottom = "-10px";
-    indicatorStyle.value.top = "-4px";
+    style.marginBottom = '-10px'
+    indicatorStyle.value.top = '-4px'
   }
-  return style;
-});
+  return style
+})
 
 onMounted(() => {
-  getElRect();
-});
+  getElRect()
+})
 
 /**
  * @description 长按触发事件
  * */
 const longPressHandler = () => {
-  tooltipTop.value = 0;
-  showTooltip.value = true;
-};
+  tooltipTop.value = 0
+  showTooltip.value = true
+}
 
 /**
  * @description 点击透明遮罩
  * */
 const overlayClickHandler = () => {
-  showTooltip.value = false;
-};
+  showTooltip.value = false
+}
 
 /**
  * @description 点击弹出按钮
  * */
 const btnClickHandler = (index: number) => {
-  showTooltip.value = false;
+  showTooltip.value = false
   // 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
-  emit("click", showCopy.value ? index + 1 : index);
-};
+  emit('click', showCopy.value ? index + 1 : index)
+}
 
 /**
  * @description 元素尺寸
  * */
 const getElRect = () => {
   // 调用之前，先将指示器调整到屏幕外，方便获取尺寸
-  showTooltip.value = true;
-  tooltipTop.value = -10000;
+  showTooltip.value = true
+  tooltipTop.value = -10000
   sleep(500).then(() => {
     getRect(`#${tooltipId.value}`, false, instance).then((size) => {
-      tooltipInfo.value = size as UniApp.NodeInfo;
+      tooltipInfo.value = size as UniApp.NodeInfo
       // 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
-      showTooltip.value = false;
-    });
+      showTooltip.value = false
+    })
     getRect(`#${textId.value}`, false, instance).then((size) => {
-      textInfo.value = size as UniApp.NodeInfo;
-    });
-  });
-};
+      textInfo.value = size as UniApp.NodeInfo
+    })
+  })
+}
 /**
  * @description 复制文本到粘贴板
  * */
 const setClipboardData = () => {
   // 关闭组件
-  showTooltip.value = false;
-  emit("click", 0);
+  showTooltip.value = false
+  emit('click', 0)
   uni.setClipboardData({
     // 优先使用copyText字段，如果没有，则默认使用text字段当做复制的内容
     data: copyText.value || text.value,
     success: () => {
       showToast.value &&
         uni.showToast({
-          title: "复制成功",
-        });
+          title: '复制成功',
+        })
     },
     fail: () => {
       showToast.value &&
         uni.showToast({
-          title: "复制失败",
-        });
+          title: '复制失败',
+        })
     },
     complete: () => {
-      showTooltip.value = false;
+      showTooltip.value = false
     },
-  });
-};
+  })
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-tooltip/typing.d.ts

@@ -1,52 +1,57 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyTooltipProps {
   /**
    * @description 需要显示的提示文字
    * */
-  text: string;
+  text: string
   /**
    * @description 点击复制按钮时，复制的文本，为空则使用text值
    * */
-  copyText?: string;
+  copyText?: string
   /**
    * @description 文本大小（默认 14 ）
    * */
-  size?: number | string;
+  size?: number | string
   /**
    * @description 字体颜色（默认 '#606266' ）
    * */
-  color?: string;
+  color?: string
   /**
    * @description 弹出提示框时，文本的背景色（默认 'transparent' ）
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 弹出提示的方向，top-上方，bottom-下方（默认 'top' ）
    * */
-  direction?: HyApp.TopBottomType;
+  direction?: HyApp.TopBottomType
   /**
    * @description 弹出提示的z-index，nvue无效（默认 10071 ）
    * */
-  zIndex?: number;
+  zIndex?: number
   /**
    * @description 是否显示复制按钮（默认 true ）
    * */
-  showCopy?: boolean;
+  showCopy?: boolean
   /**
    * @description 扩展的按钮组
    * */
-  buttons?: string[];
+  buttons?: string[]
   /**
    * @description 是否显示透明遮罩以防止触摸穿透（默认 true ）
    * */
-  overlay?: boolean;
+  overlay?: boolean
   /**
    * @description 是否显示遮罩
    * */
-  showToast?: boolean;
+  showToast?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface ITooltipEmits {
+  /** 点击菜单按钮触发 */
+  (e: 'click', index: number): void
 }

package/components/hy-transition/hy-transition.vue

@@ -11,23 +11,58 @@
   </view>
 </template>
 
+<script lang="ts">
+/**
+ * 该组件用于组件的动画过渡效果。
+ * @displayName hy-transition
+ */
+defineOptions({})
+export default {
+  name: 'hy-transition',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
 <script setup lang="ts">
-import { computed, type CSSProperties, ref, watch, nextTick, toRefs } from 'vue'
+import { computed, type CSSProperties, ref, watch, nextTick, toRefs, PropType } from 'vue'
 import { sleep } from '../../utils'
-import defaultProps from './props'
-import type IProps from './typing'
+import type { ITransitionEmits } from './typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 是否展示组件 */
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  /** 使用的动画模式 */
+  mode: {
+    type: String,
+    default: 'fade',
+  },
+  /** 动画的执行时间，单位ms */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 使用的动画过渡函数 */
+  timingFunction: {
+    type: String,
+    default: 'ease-out',
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const { show, mode, duration, customStyle, timingFunction } = toRefs(props)
-const emit = defineEmits([
-  'click',
-  'beforeEnter',
-  'enter',
-  'afterEnter',
-  'beforeLeave',
-  'leave',
-  'afterLeave',
-])
+const emit = defineEmits<ITransitionEmits>()
 
 const hasInit = ref<boolean>(false) // 是否显示/隐藏组件
 const viewStyle = ref<CSSProperties>({}) // 组件内部的样式

package/components/hy-transition/typing.d.ts

@@ -26,3 +26,20 @@ export default interface HyTransitionProps {
    * */
   customClass?: string
 }
+
+export interface ITransitionEmits {
+  /** 进入中触发 */
+  (e: 'enter'): void
+  /** 离开中触发 */
+  (e: 'leave'): void
+  /** 点击触发 */
+  (e: 'click'): void
+  /** 进入后触发 */
+  (e: 'afterEnter'): void
+  /** 离开后触发 */
+  (e: 'afterLeave'): void
+  /** 进入前触发 */
+  (e: 'beforeEnter'): void
+  /** 离开前触发 */
+  (e: 'beforeLeave'): void
+}