From 5d5546d74870de69a3406424b90bb979d4c5f1bc Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Thu, 22 Sep 2022 00:00:29 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20[tolltip]:=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20content=20=E8=87=AA=E5=8A=A8=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/popper/index.vue  | 39 ++++++++---
 .../component/src/component/tagInput/Tag.vue  | 64 -------------------
 .../component/src/component/tooltip/index.vue |  2 +-
 3 files changed, 32 insertions(+), 73 deletions(-)
 delete mode 100644 package/component/src/component/tagInput/Tag.vue

diff --git a/package/component/src/component/popper/index.vue b/package/component/src/component/popper/index.vue
index c94e08fe..c4fa522d 100644
--- a/package/component/src/component/popper/index.vue
+++ b/package/component/src/component/popper/index.vue
@@ -36,8 +36,14 @@ import {
   computed,
   toRef,
   StyleValue,
+  Ref,
 } from "vue";
-import { onClickOutside, useEventListener, useThrottleFn } from "@vueuse/core";
+import {
+  onClickOutside,
+  useEventListener,
+  useResizeObserver,
+  useThrottleFn,
+} from "@vueuse/core";
 
 export type PopperTrigger = "click" | "hover" | "focus" | "contextMenu";
 
@@ -209,18 +215,35 @@ onClickOutside(
   }
 );
 
+useResizeObserver(triggerRefEl, () => {
+  updatePosistion();
+});
+
+let popperObserver: { stop: any; isSupported?: Ref<boolean> } | undefined =
+  undefined;
+
+watch(innerVisible, (isShow) => {
+  updatePosistion();
+  if (isShow) {
+    popperObserver = useResizeObserver(popperRefEl, () => {
+      updatePosistion();
+    });
+  } else {
+    popperObserver && popperObserver.stop();
+  }
+});
+
 watch(
   () => props.visible,
   (isShow) => (isShow ? doShow() : doHidden())
 );
 
-watch(innerVisible, (val) => {
-  updatePosistion();
-});
-
-watch([() => props.content, () => slots.content && slots?.content()], (val) => {
-  innerVisible.value && updatePosistion();
-});
+watch(
+  () => props.content,
+  () => {
+    updatePosistion();
+  }
+);
 
 const isScrollElement = function (element: HTMLElement) {
   return (
diff --git a/package/component/src/component/tagInput/Tag.vue b/package/component/src/component/tagInput/Tag.vue
deleted file mode 100644
index 5ab4b9fc..00000000
--- a/package/component/src/component/tagInput/Tag.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-export default {
-  name: "Tag",
-};
-</script>
-<script lang="ts" setup>
-import { ref } from "vue";
-
-export interface LayTagProps {
-  theme?: string;
-  closable?: boolean;
-  size?: string;
-}
-
-const props = withDefaults(defineProps<LayTagProps>(), {
-  closable: true,
-});
-
-const emit = defineEmits(["close"]);
-
-const visible = ref(true);
-
-const handleClose = (e: MouseEvent) => {
-  visible.value = false;
-  emit("close", e);
-};
-</script>
-<template>
-  <lay-badge v-if="visible" theme="green">
-    <template v-if="$slots.default" #default>
-      <slot name="default"></slot>
-      <lay-icon
-        v-if="closable"
-        type="layui-icon-close"
-        @click.stop="handleClose"
-      ></lay-icon>
-    </template>
-  </lay-badge>
-</template>
-
-<!-- <template v-for="(item, index) in selectItem.label" :key="index">
-            <lay-badge theme="green">
-              <span>{{ item }}</span>
-              <i
-                :class="['layui-icon', { 'layui-icon-close': true }]"
-                v-if="
-                  !disabled &&
-                  !(
-                    Array.isArray(selectItem.value) &&
-                    selectItem.value.length > 0 &&
-                    disabledItemMap[selectItem.value[index]]
-                  )
-                "
-                @click="
-                  removeItemHandle($event, {
-                    label: item,
-                    value: Array.isArray(selectItem.value)
-                      ? selectItem.value[index]
-                      : null,
-                  })
-                "
-              ></i>
-            </lay-badge>
-          </template> -->
diff --git a/package/component/src/component/tooltip/index.vue b/package/component/src/component/tooltip/index.vue
index 1d4608cc..e60b996c 100644
--- a/package/component/src/component/tooltip/index.vue
+++ b/package/component/src/component/tooltip/index.vue
@@ -62,7 +62,7 @@ const props = defineProps({
     type: [String, Array, Object],
   },
   popperStyle: {
-    type: Object as PropType<StyleValue>,
+    type: [String, Object] as PropType<StyleValue>,
   },
 });
 const vm = getCurrentInstance()!;