From 20a49818a3e64a0c042d42754154e52bdf7829fa Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Tue, 6 Sep 2022 12:14:52 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20[tooltip]=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20visible=20=E5=8F=82=E6=95=B0;=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D;=20content=20=E5=8F=98=E5=8C=96=E6=97=B6?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/popper/index.vue  | 94 +++++++++++++++----
 .../component/src/component/tooltip/index.vue | 10 +-
 .../src/document/zh-CN/components/tab.md      |  6 +-
 .../src/document/zh-CN/components/tooltip.md  | 26 +++++
 4 files changed, 115 insertions(+), 21 deletions(-)

diff --git a/package/component/src/component/popper/index.vue b/package/component/src/component/popper/index.vue
index eb8074af..ef54a095 100644
--- a/package/component/src/component/popper/index.vue
+++ b/package/component/src/component/popper/index.vue
@@ -23,8 +23,18 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import postionFns from "./calcPosition";
-import { CSSProperties, ref, watch, onMounted } from "vue";
+import {
+  CSSProperties,
+  ref,
+  watch,
+  onMounted,
+  watchEffect,
+  nextTick,
+  onBeforeUnmount,
+  useSlots,
+} from "vue";
 import { on } from "../../utils/domUtil";
+import { useThrottleFn } from "@vueuse/core";
 
 export interface LayPopperProps {
   el: any;
@@ -36,6 +46,7 @@ export interface LayPopperProps {
   disabled?: boolean;
   isCanHide?: boolean;
   isAutoShow?: boolean;
+  visible?: boolean;
 }
 
 const props = withDefaults(defineProps<LayPopperProps>(), {
@@ -46,8 +57,11 @@ const props = withDefaults(defineProps<LayPopperProps>(), {
   isCanHide: true,
   isAutoShow: false,
   trigger: "hover",
+  visible: false,
 });
 
+const slots = useSlots();
+
 const EVENT_MAP: any = {
   hover: ["mouseenter", null, "mouseleave", false],
   click: ["click", document, "click", true],
@@ -62,13 +76,17 @@ const style = ref<CSSProperties>({ top: -window.innerHeight + "px", left: 0 });
 const checkTarget = ref(false);
 const popper = ref<HTMLDivElement>({} as HTMLDivElement);
 const innnerPosition = ref(props.position);
-const innerVisible = ref(!props.isCanHide);
-const isExist = ref(!props.isCanHide);
+const innerVisible = ref(props.visible);
+const isExist = ref(props.visible);
 
 watch(
-  () => props.isCanHide,
+  () => props.visible,
   (val) => {
-    innerVisible.value = !val;
+    if (val) {
+      doShow();
+    } else {
+      doHidden();
+    }
   }
 );
 
@@ -83,26 +101,25 @@ watch(popper, (val) => {
   }
 });
 
-watch(
-  () => props.content,
-  (val) => {
-    innerVisible.value && invokeShowPosistion();
-  }
-);
+watch([() => props.content, () => slots.content && slots?.content()], (val) => {
+  innerVisible.value && invokeShowPosistion();
+});
 
 const doShow = function () {
   if (!props.disabled) {
     if (!isExist.value) {
       isExist.value = true;
-      setTimeout(() => (innerVisible.value = true), 0);
+      nextTick(() => {
+        innerVisible.value = true;
+      });
     } else {
       innerVisible.value = true;
     }
   }
 };
 
-const doHidden = function (e: MouseEvent) {
-  if (checkTarget.value && props.el.contains(e.target)) {
+const doHidden = function (e?: MouseEvent) {
+  if (checkTarget.value && props.el.contains(e?.target)) {
     return;
   }
 
@@ -127,13 +144,41 @@ const showPosistion = function () {
 const invokeShowPosistion = function () {
   if (innerVisible.value) {
     popper.value.offsetWidth === 0
-      ? setTimeout(showPosistion, 0)
+      ? nextTick(() => showPosistion())
       : showPosistion();
-    // 延时确保计算位置正确
-    setTimeout(() => innerVisible.value && showPosistion(), 2);
+    nextTick(() => {
+      showPosistion();
+    });
   }
 };
 
+let scrollElements: HTMLElement[] | undefined;
+
+const isScrollElement = (element: HTMLElement) => {
+  return (
+    element.scrollHeight > element.offsetHeight ||
+    element.scrollWidth > element.offsetWidth
+  );
+};
+
+const getScrollElements = (container: HTMLElement | undefined) => {
+  const scrollElements: HTMLElement[] = [];
+  let element: HTMLElement | undefined = container;
+  while (element && element !== document.documentElement) {
+    if (isScrollElement(element)) {
+      scrollElements.push(element);
+    }
+    element = element.parentElement ?? undefined;
+  }
+  return scrollElements;
+};
+
+const handleScroll = useThrottleFn(() => {
+  if (innerVisible.value) {
+    invokeShowPosistion();
+  }
+}, 15);
+
 // 事件绑定
 on(props.el, triggerArr[0], doShow);
 on(triggerArr[1] ?? props.el, triggerArr[2], doHidden);
@@ -141,5 +186,20 @@ checkTarget.value = triggerArr[3];
 
 onMounted(() => {
   invokeShowPosistion();
+  scrollElements = getScrollElements(props.el);
+  for (const item of scrollElements) {
+    item.addEventListener("scroll", handleScroll);
+  }
+  window.addEventListener("resize", handleScroll);
+});
+
+onBeforeUnmount(() => {
+  if (scrollElements) {
+    for (const item of scrollElements) {
+      item.removeEventListener("scroll", handleScroll);
+    }
+    scrollElements = undefined;
+  }
+  window.removeEventListener("resize", handleScroll);
 });
 </script>
diff --git a/package/component/src/component/tooltip/index.vue b/package/component/src/component/tooltip/index.vue
index 405046df..2990a93b 100644
--- a/package/component/src/component/tooltip/index.vue
+++ b/package/component/src/component/tooltip/index.vue
@@ -11,7 +11,7 @@
 <script lang="ts">
 import "./index.less";
 import LayPopper from "../popper/index.vue";
-import { defineComponent, ref } from "vue";
+import { defineComponent, PropType, ref } from "vue";
 import { useEventListener } from "@vueuse/core";
 export default defineComponent({
   name: "LayTooltip",
@@ -43,6 +43,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    trigger: {
+      type: String as PropType<"click" | "hover">,
+      default: "hover",
+    },
   },
   setup() {
     const isMounted = ref(false);
diff --git a/package/document-component/src/document/zh-CN/components/tab.md b/package/document-component/src/document/zh-CN/components/tab.md
index a3b4a57f..6cee0e73 100644
--- a/package/document-component/src/document/zh-CN/components/tab.md
+++ b/package/document-component/src/document/zh-CN/components/tab.md
@@ -389,11 +389,11 @@ export default {
 | 属性                | 描述                                               | 类型                                      | 默认值   | 可选值                        |
 | ------------------- | -------------------------------------------------- | ----------------------------------------- | -------- | ----------------------------- |
 | v-model             | 当前激活                                           | `string`                                  | -        | -                             |
-| type                | 主题样式                                           | `string`                                  | -        | -                             |
+| type                | 主题样式                                           | `string`                                  | -        | `brief` `card`                            |
 | tabPosition         | 位置                                               | `string`                                  | `bottom` | `top` `bottom` `left` `right` |
 | allow-close         | 允许关闭                                           | `boolean`                                 | `false`  | `true` `false`                |
-| before-close        | `Function`关闭之前的回调钩子函数                   | 参数(`id`), `return false` 表示不进行关闭 | -        | -                             |
-| before-leave        | `Function`切换标签之前的回调钩子函数               | 参数(`id`), `return false` 表示不进行切换 | -        | -                             |
+| before-close        | 关闭之前的回调钩子函数,参数(`id`), `return false` 表示不进行关闭                  | `Function` | -        | -                             |
+| before-leave        | 切换标签之前的回调钩子函数,  参数(`id`), `return false` 表示不进行关闭              | `Function` | -        | -                             |
 | activeBarTransition | 是否开启 activeBar 动画,仅 brief 有效,默认 `false` | `boolean`                                 | `false`  | `true` `false`                |
 
 :::
diff --git a/package/document-component/src/document/zh-CN/components/tooltip.md b/package/document-component/src/document/zh-CN/components/tooltip.md
index 33eec009..17a20db4 100644
--- a/package/document-component/src/document/zh-CN/components/tooltip.md
+++ b/package/document-component/src/document/zh-CN/components/tooltip.md
@@ -48,9 +48,35 @@ setup() {
     <lay-button>tooltip</lay-button>
   </lay-tooltip>
 </template>
+:::
 
+::: title 外部控制
+:::
+
+::: demo
+<template>
+  <lay-button @click="visible = !visible">{{visible ? '显示' : '隐藏'}}</lay-button>
+  <div style="padding: 100px">
+    <lay-tooltip position="right" content="时光都淡了，我还伴着你。" :visible="visible">
+      <lay-button>tooltip</lay-button>
+    </lay-tooltip>
+  </div>
+</template>
+
+<script>
+import { ref,watch } from 'vue';
+export default {
+  setup() {
+    const visible = ref(false)
+  return {
+    visible,
+  }
+}
+}
+</script>
 <style>
 </style>
+
 :::
 
 ::: title 显示位置