From 0859f4c11d19ae69994d006d1f01770c3c5638a8 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 23 Dec 2022 16:17:06 +0800
Subject: [PATCH 01/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0popup=20=E8=BE=B9?=
 =?UTF-8?q?=E7=BC=98=E6=A3=80=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../directves/click-outside/index.ts          |  56 +++++
 .../src/components/directves/index.ts         |   2 +
 .../src/components/popup/OPopup.vue           | 182 ++++++++++++++
 .../popup/__demo__/PopupContainer.vue         | 125 ++++++++++
 .../popup/__demo__/PopupPosition.vue          |  87 +++++++
 .../popup/__demo__/PopupVisible.vue           |  31 +++
 .../opendesign/src/components/popup/index.ts  |  14 ++
 .../opendesign/src/components/popup/popup.ts  | 232 ++++++++++++++++++
 .../src/components/popup/style/index.scss     |  59 +++++
 .../src/components/popup/style/index.ts       |   1 +
 .../src/components/popup/style/var.scss       |   6 +
 .../opendesign/src/components/popup/types.ts  |  22 ++
 packages/portal/src/pages/ThePopup.vue        |  15 ++
 packages/portal/src/router.ts                 |  12 +
 14 files changed, 844 insertions(+)
 create mode 100644 packages/opendesign/src/components/directves/click-outside/index.ts
 create mode 100644 packages/opendesign/src/components/directves/index.ts
 create mode 100644 packages/opendesign/src/components/popup/OPopup.vue
 create mode 100644 packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
 create mode 100644 packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
 create mode 100644 packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
 create mode 100644 packages/opendesign/src/components/popup/index.ts
 create mode 100644 packages/opendesign/src/components/popup/popup.ts
 create mode 100644 packages/opendesign/src/components/popup/style/index.scss
 create mode 100644 packages/opendesign/src/components/popup/style/index.ts
 create mode 100644 packages/opendesign/src/components/popup/style/var.scss
 create mode 100644 packages/opendesign/src/components/popup/types.ts
 create mode 100644 packages/portal/src/pages/ThePopup.vue

diff --git a/packages/opendesign/src/components/directves/click-outside/index.ts b/packages/opendesign/src/components/directves/click-outside/index.ts
new file mode 100644
index 00000000..c12824e7
--- /dev/null
+++ b/packages/opendesign/src/components/directves/click-outside/index.ts
@@ -0,0 +1,56 @@
+import { ObjectDirective, DirectiveBinding } from 'vue';
+interface handlerItemT {
+  handler: () => void
+}
+
+const elList = new Map<HTMLElement, Array<handlerItemT>>();
+
+window.addEventListener('mousedown', (e) => {
+  elList.forEach((handlers, el) => {
+    if (!el.contains(e.target as HTMLElement)) {
+
+      handlers.forEach(item => {
+        item.handler();
+      });
+    }
+  });
+});
+
+function addListener(el: HTMLElement, fn: () => void) {
+  if (!elList.has(el)) {
+    elList.set(el, []);
+  }
+
+  const handlers = elList.get(el);
+  if (handlers) {
+    handlers.push({
+      handler: fn
+    });
+  }
+}
+
+function removeListener(el: HTMLElement) {
+  elList.delete(el);
+
+}
+
+const vOutClick: ObjectDirective = {
+  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+    addListener(el, binding.value);
+  },
+  unmounted(el: HTMLElement) {
+    removeListener(el);
+  }
+};
+
+export function listenOutClick(el: HTMLElement, fn: () => void) {
+  addListener(el, fn);
+  return () => {
+    removeListener(el);
+  };
+}
+
+
+export {
+  vOutClick
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/directves/index.ts b/packages/opendesign/src/components/directves/index.ts
new file mode 100644
index 00000000..c6ac1fa8
--- /dev/null
+++ b/packages/opendesign/src/components/directves/index.ts
@@ -0,0 +1,2 @@
+export * from './click-outside';
+export * from './focus';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
new file mode 100644
index 00000000..c90fb194
--- /dev/null
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance } from 'vue';
+import { PopupPosition, PopupTrigger } from './types';
+import { listenOutClick } from '../directves';
+import { isElement } from '../_shared/dom';
+import { calcPopupStyle } from './popup';
+
+const props = defineProps({
+  position: {
+    type: String as PropType<PopupPosition>,
+    default: PopupPosition.LB,
+  },
+  trigger: {
+    type: [String, Array<String>] as PropType<PopupTrigger | PopupTrigger[]>,
+    default: PopupTrigger.HOVER,
+  },
+  target: {
+    type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
+    default: null,
+    require: true,
+  },
+  visible: {
+    type: Boolean,
+  },
+  container: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: document.documentElement,
+  },
+});
+
+const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
+
+const show = ref(false);
+let targetEl: HTMLElement | null = null;
+let containerEl: HTMLElement | null = null;
+const popWrap = ref<HTMLElement | null>(null);
+const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({});
+const popPosition = ref(props.position);
+// 处理popup位置
+const updatePopupStyle = () => {
+  if (!targetEl || !popWrap.value || !containerEl) {
+    return;
+  }
+
+  const { style, position } = calcPopupStyle(popWrap.value, targetEl, containerEl, props.position);
+
+  popStyle.top = `${style.top}px`;
+  popStyle.left = `${style.left}px`;
+  popPosition.value = position;
+};
+
+const showFn = () => {
+  if (!show.value) {
+    show.value = true;
+    emits('update:visible', true);
+    nextTick(() => {
+      updatePopupStyle();
+    });
+  }
+};
+const hideFn = () => {
+  if (show.value) {
+    show.value = false;
+    emits('update:visible', false);
+  }
+};
+watch(
+  () => props.visible,
+  (val) => {
+    show.value = val;
+    if (val) {
+      nextTick(() => {
+        updatePopupStyle();
+      });
+    }
+  }
+);
+
+// 监听元素的触发事件
+const handleTrigger = (el: HTMLElement | null) => {
+  if (!el) {
+    return [];
+  }
+  targetEl = el;
+
+  const listeners: Array<() => void> = [];
+
+  const triggers = Array.isArray(props.trigger) ? props.trigger : [props.trigger];
+  triggers.forEach((tr: PopupTrigger) => {
+    if (tr === PopupTrigger.HOVER) {
+      el?.addEventListener('mouseover', showFn);
+      el?.addEventListener('mouseleave', hideFn);
+      const removeFn = () => {
+        el?.removeEventListener('mouseover', showFn);
+        el?.removeEventListener('mouseleave', hideFn);
+      };
+      listeners.push(removeFn);
+    } else if (tr === PopupTrigger.FOUCS) {
+      el?.addEventListener('focusin', showFn);
+      el?.addEventListener('focusout', hideFn);
+      const removeFn = () => {
+        el?.removeEventListener('focusin', showFn);
+        el?.removeEventListener('focusout', hideFn);
+      };
+      listeners.push(removeFn);
+    } else if (tr === PopupTrigger.CLICK) {
+      el?.addEventListener('click', showFn);
+
+      const removeFn = listenOutClick(el, hideFn);
+
+      listeners.push(() => {
+        el?.removeEventListener('click', showFn);
+      });
+      listeners.push(removeFn);
+    } else if (tr === PopupTrigger.CONTEXT_MENU) {
+      const fn = (e: Event) => {
+        e.preventDefault();
+        showFn();
+      };
+      el?.addEventListener('contextmenu', fn);
+
+      const removeFn = listenOutClick(el, hideFn);
+
+      listeners.push(() => {
+        el?.removeEventListener('contextmenu', fn);
+      });
+      listeners.push(removeFn);
+    }
+  });
+
+  return listeners;
+};
+
+let triggerListener: ReturnType<typeof handleTrigger> = [];
+
+// 触发元素为组件ref，处理事件触发
+watch(
+  () => props.target,
+  (ele) => {
+    if (ele && (ele as ComponentPublicInstance).$el) {
+      triggerListener = handleTrigger((ele as ComponentPublicInstance).$el);
+    }
+  }
+);
+onMounted(() => {
+  // 在mounted事件后再显示，避免找不到container
+  show.value = props.visible;
+
+  // 触发元素为dom或者选择器，处理事件触发
+  nextTick(() => {
+    if (typeof props.container === 'string') {
+      containerEl = document.querySelector(props.container);
+    } else {
+      containerEl = props.container;
+    }
+
+    if (show.value) {
+      updatePopupStyle();
+    }
+
+    if (typeof props.target === 'string') {
+      triggerListener = handleTrigger(document.querySelector(props.target));
+    } else if (isElement(props.target)) {
+      triggerListener = handleTrigger(props.target as HTMLElement);
+    }
+  });
+});
+onUnmounted(() => {
+  triggerListener.forEach((fn) => {
+    fn();
+  });
+});
+</script>
+<template>
+  <teleport v-if="show" :to="props.container">
+    <div ref="popWrap" class="o-popup" :style="popStyle">
+      <div class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
+        <slot></slot>
+      </div>
+    </div>
+  </teleport>
+</template>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
new file mode 100644
index 00000000..1361e38b
--- /dev/null
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { PopupPosition, OPopup, PopupTrigger } from '../index';
+
+const content = 'this is popup content';
+const btn1 = ref(null);
+const btn2 = ref(null);
+const btn3 = ref(null);
+const btn4 = ref(null);
+const btn5 = ref(null);
+const btn6 = ref(null);
+const btn7 = ref(null);
+const btn8 = ref(null);
+const btn9 = ref(null);
+// const visible = ref(false);
+</script>
+<template>
+  <h4>popup container</h4>
+  <div id="wrap">
+    <div class="content">
+      <OButton ref="btn1" class="btn1">TL btn1 </OButton>
+      <OButton ref="btn2" class="btn2">TR btn2 </OButton>
+      <OButton ref="btn3" class="btn3"> btn3 </OButton>
+      <OButton ref="btn4" class="btn4">LT btn4 </OButton>
+      <OButton ref="btn5" class="btn5"> btn5 </OButton>
+      <OButton ref="btn6" class="btn6"> btn6 </OButton>
+      <OButton ref="btn7" class="btn7"> btn7 </OButton>
+      <OButton ref="btn8" class="btn8"> btn8 </OButton>
+      <OButton ref="btn9" class="btn9"> btn9 </OButton>
+
+      <OPopup :position="PopupPosition.TL" :target="btn1" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+      <OPopup :position="PopupPosition.TR" :target="btn2" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+      <OPopup :position="PopupPosition.TL" :target="btn3" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+      <OPopup :position="PopupPosition.LT" :target="btn4" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+      <OPopup :position="PopupPosition.TL" :target="btn5" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+      <OPopup :position="PopupPosition.TL" :target="btn6" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+      <OPopup :position="PopupPosition.LEFT" :target="btn7" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+      <OPopup :position="PopupPosition.TL" :target="btn8" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+      <OPopup :position="PopupPosition.TL" :target="btn9" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div>{{ content }}</div>
+        <div>{{ content }}</div>
+      </OPopup>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+#wrap {
+  height: 40vh;
+  width: 50vw;
+  overflow: auto;
+  border: 1px solid #333;
+  position: relative;
+}
+.content {
+  height: 30vh;
+  width: 70vw;
+
+  position: relative;
+  :deep(.o-btn) {
+    position: absolute;
+  }
+}
+.btn1 {
+  left: 0;
+  top: 0;
+}
+.btn2 {
+  left: 80px;
+  top: 0;
+}
+.btn3 {
+  right: 0;
+  top: 0;
+}
+.btn4 {
+  left: 0;
+  top: 11vh;
+}
+.btn5 {
+  left: 45vw;
+  top: 15vh;
+}
+.btn6 {
+  right: 0;
+  top: 15vh;
+}
+.btn7 {
+  left: 0;
+  bottom: 0;
+}
+.btn8 {
+  left: 45vw;
+  bottom: 0;
+}
+.btn9 {
+  right: 0;
+  bottom: 0;
+}
+</style>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
new file mode 100644
index 00000000..ac28e33a
--- /dev/null
+++ b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { PopupPosition, OPopup } from '../index';
+
+const content = 'this is popup content';
+const btn1 = ref(null);
+const btn2 = ref(null);
+const btn3 = ref(null);
+const btn4 = ref(null);
+const btn5 = ref(null);
+const btn6 = ref(null);
+const btn7 = ref(null);
+const btn8 = ref(null);
+const btn9 = ref(null);
+const btn10 = ref(null);
+const btn11 = ref(null);
+const btn12 = ref(null);
+</script>
+<template>
+  <h4>popup position</h4>
+  <div class="position-wrap">
+    <div class="top">
+      <OButton ref="btn1"> TL </OButton>
+      <OPopup :position="PopupPosition.TL" :target="btn1">TL {{ content }} </OPopup>
+      <OButton ref="btn2"> TOP </OButton>
+      <OPopup :position="PopupPosition.TOP" :target="btn2">T {{ content }} </OPopup>
+      <OButton ref="btn3">TR</OButton>
+      <OPopup :position="PopupPosition.TR" :target="btn3">TR {{ content }} </OPopup>
+    </div>
+    <div class="middle">
+      <div class="left">
+        <OButton ref="btn4"> LT </OButton>
+        <OPopup :position="PopupPosition.LT" :target="btn4">LT {{ content }} </OPopup>
+        <OButton ref="btn5"> LEFT </OButton>
+        <OPopup :position="PopupPosition.LEFT" :target="btn5">L {{ content }} </OPopup>
+        <OButton ref="btn6"> LB </OButton>
+        <OPopup :position="PopupPosition.LB" :target="btn6">LB {{ content }} </OPopup>
+      </div>
+      <div class="right">
+        <OButton ref="btn7"> RT </OButton>
+        <OPopup :position="PopupPosition.RT" :target="btn7">R {{ content }} </OPopup>
+        <OButton ref="btn8"> RIGHT </OButton>
+        <OPopup :position="PopupPosition.RIGHT" :target="btn8">R {{ content }} </OPopup>
+        <OButton ref="btn9"> RB </OButton>
+        <OPopup :position="PopupPosition.RB" :target="btn9">RB {{ content }} </OPopup>
+      </div>
+    </div>
+    <div class="bottom">
+      <OButton ref="btn10"> BL </OButton>
+      <OPopup :position="PopupPosition.BL" :target="btn10">BL {{ content }} </OPopup>
+      <OButton ref="btn11"> BOTTOM </OButton>
+      <OPopup :position="PopupPosition.BOTTOM" :target="btn11">B {{ content }} </OPopup>
+      <OButton ref="btn12"> BR </OButton>
+      <OPopup :position="PopupPosition.BR" :target="btn12">BR {{ content }} </OPopup>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.position-wrap {
+  padding: 100px;
+  height: 50vh;
+  overflow: auto;
+  border: 1px solid #333;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.left > * {
+  display: block;
+  margin: 100px;
+}
+.middle {
+  display: flex;
+  justify-content: space-between;
+}
+.right > * {
+  display: block;
+  margin: 100px;
+}
+.bottom {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
new file mode 100644
index 00000000..8da50230
--- /dev/null
+++ b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { PopupPosition, OPopup, PopupTrigger } from '../index';
+
+const content = 'this is popup content';
+const btn1 = ref(null);
+const btn2 = ref(null);
+const visible = ref(false);
+setTimeout(() => {
+  visible.value = true;
+}, 2000);
+</script>
+<template>
+  <h4>popup visible</h4>
+  <section>
+    <div class="row">visible: {{ visible }}</div>
+    <div>
+      <OButton ref="btn1" class="btn">Button</OButton>
+      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn1">TL {{ content }} </OPopup>
+      <OButton ref="btn2" class="btn"> TOP </OButton>
+      <OPopup v-model:visible="visible" :position="PopupPosition.BOTTOM" :target="btn2" :trigger="PopupTrigger.NULL">T {{ content }} </OPopup>
+    </div>
+  </section>
+</template>
+<style lang="scss" scoped>
+.btn {
+  margin-left: 100px;
+}
+</style>
diff --git a/packages/opendesign/src/components/popup/index.ts b/packages/opendesign/src/components/popup/index.ts
new file mode 100644
index 00000000..1da05317
--- /dev/null
+++ b/packages/opendesign/src/components/popup/index.ts
@@ -0,0 +1,14 @@
+import _OPopup from './OPopup.vue';
+import type { App } from 'vue';
+
+export * from './types';
+
+const OPopup = Object.assign(_OPopup, {
+  install(app: App) {
+    app.component(_OPopup.name, _OPopup);
+  },
+});
+
+export {
+  OPopup,
+};
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
new file mode 100644
index 00000000..aae26b6f
--- /dev/null
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -0,0 +1,232 @@
+import { getRelativeBounding, getScroll, isRootEl } from '../_shared/dom';
+import { PopupPosition } from './types';
+
+enum Direction {
+  LEFT = 'left',
+  RIGHT = 'right',
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}
+function getDirection(position: PopupPosition): Direction {
+  switch (position) {
+    case PopupPosition.TL:
+    case PopupPosition.TR:
+    case PopupPosition.TOP:
+      return Direction.TOP;
+    case PopupPosition.BL:
+    case PopupPosition.BR:
+    case PopupPosition.BOTTOM:
+      return Direction.BOTTOM;
+    case PopupPosition.LT:
+    case PopupPosition.LB:
+    case PopupPosition.LEFT:
+      return Direction.LEFT;
+    case PopupPosition.RT:
+    case PopupPosition.RB:
+    case PopupPosition.RIGHT:
+      return Direction.RIGHT;
+  }
+}
+
+function fixPosition(position: PopupPosition, direction: Direction) {
+  const fixFn = {
+    [Direction.TOP]: (p: PopupPosition) => {
+      if (p === PopupPosition.BOTTOM) {
+        return PopupPosition.TOP;
+      } else if (p === PopupPosition.BL) {
+        return PopupPosition.TL;
+      } else if (p === PopupPosition.BR) {
+        return PopupPosition.TR;
+      }
+      return p;
+    },
+    [Direction.BOTTOM]: (p: PopupPosition) => {
+      if (p === PopupPosition.TOP) {
+        return PopupPosition.BOTTOM;
+      } else if (p === PopupPosition.TL) {
+        return PopupPosition.BL;
+      } else if (p === PopupPosition.TR) {
+        return PopupPosition.BR;
+      }
+      return p;
+    },
+    [Direction.LEFT]: (p: PopupPosition) => {
+      if (p === PopupPosition.RIGHT) {
+        return PopupPosition.LEFT;
+      } else if (p === PopupPosition.RT) {
+        return PopupPosition.LT;
+      } else if (p === PopupPosition.RB) {
+        return PopupPosition.LB;
+      }
+      return p;
+    },
+    [Direction.RIGHT]: (p: PopupPosition) => {
+      if (p === PopupPosition.LEFT) {
+        return PopupPosition.RIGHT;
+      } else if (p === PopupPosition.LT) {
+        return PopupPosition.RT;
+      } else if (p === PopupPosition.LB) {
+        return PopupPosition.RB;
+      }
+      return p;
+    }
+  };
+
+  const fn = fixFn[direction];
+  return fn ? fn(position) : position;
+}
+
+function getPopupOffset(targetEl: HTMLElement, position: PopupPosition, popupRect: DOMRect, containerRect: DOMRect) {
+  const t = getRelativeBounding(targetEl, containerRect);
+  const p = popupRect;
+  switch (position) {
+    case PopupPosition.LT: {
+      return {
+        top: t.offsetTop,
+        left: t.offsetLeft - p.width,
+      };
+    }
+    case PopupPosition.LB: {
+      return {
+        top: t.offsetTop + t.height - p.height,
+        left: t.offsetLeft - p.width,
+      };
+    }
+    case PopupPosition.LEFT: {
+      return {
+        top: t.offsetTop + Math.round(t.height / 2) - Math.round(p.height / 2),
+        left: t.offsetLeft - p.width,
+      };
+    }
+    case PopupPosition.RT: {
+      return {
+        top: t.offsetTop,
+        left: t.offsetLeft + t.width,
+      };
+    }
+    case PopupPosition.RB: {
+      return {
+        top: t.offsetTop + t.height - p.height,
+        left: t.offsetLeft + t.width,
+      };
+    }
+    case PopupPosition.RIGHT: {
+      return {
+        top: t.offsetTop + Math.round(t.height / 2) - Math.round(p.height / 2),
+        left: t.offsetLeft + t.width,
+      };
+    }
+    case PopupPosition.TL: {
+      return {
+        top: t.offsetTop - p.height,
+        left: t.offsetLeft,
+      };
+    }
+    case PopupPosition.TR: {
+      return {
+        top: t.offsetTop - p.height,
+        left: t.offsetLeft + t.width - p.width,
+      };
+    }
+    case PopupPosition.TOP: {
+      return {
+        top: t.offsetTop - p.height,
+        left: t.offsetLeft + Math.round(t.width / 2) - Math.round(p.width / 2),
+      };
+    }
+    case PopupPosition.BL: {
+      return {
+        top: t.offsetTop + t.height,
+        left: t.offsetLeft,
+      };
+    }
+    case PopupPosition.BR: {
+      return {
+        top: t.offsetTop + t.height,
+        left: t.offsetLeft + t.width - p.width
+      };
+    }
+    case PopupPosition.BOTTOM: {
+      return {
+        top: t.offsetTop + t.height,
+        left: t.offsetLeft + Math.round(t.width / 2) - Math.round(p.width / 2),
+      };
+    }
+    default: {
+      return {
+        top: 0,
+        left: 0
+      };
+    }
+  }
+}
+
+
+// 处理popup位置
+export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, container: HTMLElement, position: PopupPosition,
+  { adaptive = true }: { adaptive?: boolean } = {}) {
+
+  const cRect = container.getBoundingClientRect();
+  const pRect = popupEl.getBoundingClientRect();
+
+  const { left, top } = getPopupOffset(targetEl, position, pRect, cRect);
+
+  let fixedPosition = position;
+  let style = {
+    left,
+    top
+  };
+  // 自适应容器边缘
+  if (adaptive) {
+    const edge = {
+      left: 0,
+      top: 0,
+      right: Math.floor(cRect.width) - Math.ceil(pRect.width),
+      bottom: Math.floor(cRect.height) - Math.ceil(pRect.height),
+    };
+    const d = getDirection(position);
+    if (d === Direction.TOP && edge.top > top) {
+      fixedPosition = fixPosition(position, Direction.BOTTOM);
+      style = getPopupOffset(targetEl, fixedPosition, pRect, cRect);
+    }
+    if (d === Direction.LEFT && edge.left > left) {
+      fixedPosition = fixPosition(position, Direction.RIGHT);
+      style = getPopupOffset(targetEl, fixedPosition, pRect, cRect);
+    }
+    if (d === Direction.RIGHT && edge.right < left) {
+      fixedPosition = fixPosition(position, Direction.LEFT);
+      style = getPopupOffset(targetEl, fixedPosition, pRect, cRect);
+    }
+    if (d === Direction.BOTTOM && edge.bottom < top) {
+      fixedPosition = fixPosition(position, Direction.TOP);
+      style = getPopupOffset(targetEl, fixedPosition, pRect, cRect);
+    }
+
+    if ([Direction.TOP, Direction.BOTTOM].includes(d)) {
+      if (edge.left > left) {
+        style.left = 0;
+      } else if (edge.right < left) {
+        style.left = edge.right;
+      }
+    }
+    if ([Direction.LEFT, Direction.RIGHT].includes(d)) {
+      if (edge.top > top) {
+        style.top = 0;
+      } else if (edge.bottom < top) {
+        style.top = edge.bottom;
+      }
+    }
+  }
+
+  // 需要加上滚动值，如果为body，则不需要
+  if (!isRootEl(container)) {
+    const cs = getScroll(container);
+    style.left += cs.left;
+    style.top += cs.top;
+  }
+
+  return {
+    style,
+    position: fixedPosition
+  };
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
new file mode 100644
index 00000000..e6a48f84
--- /dev/null
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -0,0 +1,59 @@
+@import './var.scss';
+
+.o-popup {
+  position: absolute;
+  z-index: 100;
+}
+.o-popup-wrap {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  border: 1px solid red;
+}
+
+.o-popup-pos-bl {
+  margin-top: var(--popup-gap);
+}
+.o-popup-pos-bottom {
+  margin-top: var(--popup-gap);
+}
+.o-popup-pos-br {
+  margin-top: var(--popup-gap);
+}
+
+.o-popup-pos-tl {
+  margin-bottom: var(--popup-gap);
+}
+
+.o-popup-pos-top {
+  margin-bottom: var(--popup-gap);
+}
+
+.o-popup-pos-tr {
+  margin-bottom: var(--popup-gap);
+}
+
+.o-popup-pos-lt {
+  margin-right: var(--popup-gap);
+}
+
+.o-popup-pos-left {
+  margin-right: var(--popup-gap);
+}
+
+.o-popup-pos-lb {
+  margin-right: var(--popup-gap);
+}
+
+.o-popup-pos-rt {
+  margin-left: var(--popup-gap);
+}
+
+.o-popup-pos-right {
+  margin-left: var(--popup-gap);
+}
+
+.o-popup-pos-rb {
+  margin-left: var(--popup-gap);
+}
diff --git a/packages/opendesign/src/components/popup/style/index.ts b/packages/opendesign/src/components/popup/style/index.ts
new file mode 100644
index 00000000..67aac616
--- /dev/null
+++ b/packages/opendesign/src/components/popup/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/popup/style/var.scss b/packages/opendesign/src/components/popup/style/var.scss
new file mode 100644
index 00000000..0183f05a
--- /dev/null
+++ b/packages/opendesign/src/components/popup/style/var.scss
@@ -0,0 +1,6 @@
+.o-popup {
+  --popup-bg: var(--o-color-bg2);
+  --popup-shadow: var(--o-shadow-1);
+  --popup-gap: 4px;
+  --popup-radius: var(--o-radius-s);
+}
diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts
new file mode 100644
index 00000000..20286519
--- /dev/null
+++ b/packages/opendesign/src/components/popup/types.ts
@@ -0,0 +1,22 @@
+export enum PopupPosition {
+  TOP = 'top', // top
+  BOTTOM = 'bottom', // bottom
+  LEFT = 'left', // left
+  RIGHT = 'right', // right
+  LT = 'lt', //left-top
+  TL = 'tl', //top-left
+  LB = 'lb', //left-bottom,
+  BL = 'bl', //bottom-left,
+  RT = 'rt', //right-top,
+  TR = 'tr', //top-right,
+  RB = 'rb', //right-bottom,
+  BR = 'br', //bottom-right,
+}
+
+export enum PopupTrigger {
+  NULL = 'null',
+  HOVER = 'hover',
+  CLICK = 'click',
+  FOUCS = 'foucs',
+  CONTEXT_MENU = 'contextmenu'
+}
\ No newline at end of file
diff --git a/packages/portal/src/pages/ThePopup.vue b/packages/portal/src/pages/ThePopup.vue
new file mode 100644
index 00000000..13881187
--- /dev/null
+++ b/packages/portal/src/pages/ThePopup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import '@opensig/opendesign/src/components/popup/style';
+
+import PopupPosition from '@demo/popup/__demo__/PopupPosition.vue';
+import PopupVisible from '@demo/popup/__demo__/PopupVisible.vue';
+import PopupContainer from '@demo/popup/__demo__/PopupContainer.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <PopupContainer />
+    <!-- <PopupPosition />
+    <PopupVisible /> -->
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index e5911eed..1a2ac25e 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -20,6 +20,18 @@ export const routes = [
     label: '开关',
     component: () => import('./pages/TheSwitch.vue'),
   },
+  {
+    path: '/popup',
+    name: 'Popup',
+    label: '浮层',
+    component: () => import('./pages/ThePopup.vue'),
+  },
+  {
+    path: '/select',
+    name: 'Select',
+    label: '下拉框',
+    component: () => import('./pages/TheSelect.vue'),
+  },
 ];
 
 export const router = createRouter({
-- 
Gitee


From 9cac9c7bfaaee34b6dc67287a76619231b0cf1fd Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 23 Dec 2022 22:14:21 +0800
Subject: [PATCH 02/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0resizeobserver=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=8Ahook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/package.json              |  3 +-
 .../src/components/_shared/utils.ts           |  3 ++
 .../opendesign/src/components/hooks/index.ts  |  1 +
 .../components/hooks/use-resize-observer.ts   | 32 ++++++++++++++++
 packages/opendesign/src/components/index.ts   |  2 +
 .../__demo__/ResizeObserver.vue               | 37 +++++++++++++++++++
 .../src/components/resize-observer/index.ts   |  1 +
 .../resize-observer/resize-observer.ts        | 34 +++++++++++++++++
 .../portal/src/pages/TheResizeObserver.vue    | 11 ++++++
 packages/portal/src/router.ts                 |  6 +++
 10 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 packages/opendesign/src/components/hooks/index.ts
 create mode 100644 packages/opendesign/src/components/hooks/use-resize-observer.ts
 create mode 100644 packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
 create mode 100644 packages/opendesign/src/components/resize-observer/index.ts
 create mode 100644 packages/opendesign/src/components/resize-observer/resize-observer.ts
 create mode 100644 packages/portal/src/pages/TheResizeObserver.vue

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 038394c8..4e19c363 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -31,6 +31,7 @@
     "vue-tsc": "^1.0.13"
   },
   "dependencies": {
-    "@vue/shared": "^3.2.45"
+    "@vue/shared": "^3.2.45",
+    "resize-observer-polyfill": "^1.5.1"
   }
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index e69de29b..bd67757e 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -0,0 +1,3 @@
+export function isFunction(fn: any) {
+  return typeof fn === 'function';
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/index.ts b/packages/opendesign/src/components/hooks/index.ts
new file mode 100644
index 00000000..31fd89e8
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-resize-observer';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
new file mode 100644
index 00000000..af556538
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -0,0 +1,32 @@
+import ResizeObserver from 'resize-observer-polyfill';
+import { isFunction } from '../_shared/utils';
+
+export function useResizeObserver() {
+  let ro: ResizeObserver | null = null;
+
+  // 创建监听实例
+  const createResizeObserver = (el: HTMLElement, onResize: (en: ResizeObserverEntry) => void) => {
+    if (!el) {
+      return;
+    }
+    ro = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      if (isFunction(onResize)) {
+        onResize(entries[0]);
+      }
+    });
+    ro.observe(el);
+  };
+
+  // 销毁监听
+  const destoryResizeObserver = () => {
+    if (ro) {
+      ro.disconnect();
+      ro = null;
+    }
+  };
+
+  return {
+    createResizeObserver,
+    destoryResizeObserver
+  };
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index fa182398..2fecc76c 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -1,5 +1,7 @@
 export * from './_shared/global';
 
+export * from './hooks';
+
 export * from './button';
 
 export * from './switch';
diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
new file mode 100644
index 00000000..3678619f
--- /dev/null
+++ b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ResizeObserver } from '../index';
+import { OButton } from '../../button';
+import '../../button/style';
+
+const content = ref('content text: ');
+let cnt = 1;
+const changeFn = () => {
+  cnt++;
+  content.value += `-${cnt} `;
+};
+
+const onResize = () => {
+  console.log('resized');
+};
+</script>
+<template>
+  <h4>resize observer</h4>
+
+  <!-- <ResizeObserver @resize="onResize">
+    <div class="content" @click="changeFn">
+      {{ content }}
+    </div>
+  </ResizeObserver> -->
+  <br />
+  <ResizeObserver @resize="onResize">
+    <OButton @click="changeFn">
+      {{ content }}
+    </OButton>
+  </ResizeObserver>
+</template>
+<style lang="scss" scoped>
+.content {
+  display: inline-block;
+}
+</style>
diff --git a/packages/opendesign/src/components/resize-observer/index.ts b/packages/opendesign/src/components/resize-observer/index.ts
new file mode 100644
index 00000000..6853e703
--- /dev/null
+++ b/packages/opendesign/src/components/resize-observer/index.ts
@@ -0,0 +1 @@
+export { default as ResizeObserver } from './resize-observer';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/resize-observer/resize-observer.ts b/packages/opendesign/src/components/resize-observer/resize-observer.ts
new file mode 100644
index 00000000..e93b1821
--- /dev/null
+++ b/packages/opendesign/src/components/resize-observer/resize-observer.ts
@@ -0,0 +1,34 @@
+import { defineComponent, onBeforeUnmount, onMounted, ref, cloneVNode, ComponentPublicInstance } from 'vue';
+import { useResizeObserver } from '../hooks';
+
+export default defineComponent({
+  name: 'ResizeObserver',
+  emits: ['resize'],
+  setup(props, { emit, slots }) {
+    const { createResizeObserver, destoryResizeObserver } = useResizeObserver();
+
+    const childRef = ref<HTMLElement | ComponentPublicInstance | null>(null);
+
+    onMounted(() => {
+      if (childRef.value) {
+        createResizeObserver((childRef.value as ComponentPublicInstance).$el || childRef.value, (entry: ResizeObserverEntry) => {
+          emit('resize', entry);
+        });
+      }
+
+    });
+
+    onBeforeUnmount(() => {
+      destoryResizeObserver();
+    });
+
+    return () => {
+      const children = slots.default?.();
+      if (children) {
+        return cloneVNode(children[0], { ref: childRef });
+      } else {
+        return null;
+      }
+    };
+  },
+});
diff --git a/packages/portal/src/pages/TheResizeObserver.vue b/packages/portal/src/pages/TheResizeObserver.vue
new file mode 100644
index 00000000..1216b237
--- /dev/null
+++ b/packages/portal/src/pages/TheResizeObserver.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ResizeObserver from '@demo/resize-observer/__demo__/ResizeObserver.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <!-- <SelectSize /> -->
+    <!-- <SelectDisabled /> -->
+    <ResizeObserver />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 1a2ac25e..f3204227 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -26,6 +26,12 @@ export const routes = [
     label: '浮层',
     component: () => import('./pages/ThePopup.vue'),
   },
+  {
+    path: '/resize-observer',
+    name: 'ResizeObserver',
+    label: 'resize监听',
+    component: () => import('./pages/TheResizeObserver.vue'),
+  },
   {
     path: '/select',
     name: 'Select',
-- 
Gitee


From 1154f3e95215323f1fd5da3e85b6725e9b3e07da Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 23 Dec 2022 22:15:58 +0800
Subject: [PATCH 03/28] =?UTF-8?q?demo=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/resize-observer/__demo__/ResizeObserver.vue  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
index 3678619f..fb48a546 100644
--- a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
+++ b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
@@ -18,12 +18,12 @@ const onResize = () => {
 <template>
   <h4>resize observer</h4>
 
-  <!-- <ResizeObserver @resize="onResize">
+  <ResizeObserver @resize="onResize">
     <div class="content" @click="changeFn">
       {{ content }}
     </div>
-  </ResizeObserver> -->
-  <br />
+  </ResizeObserver>
+  <div style="margin-top: 30px"></div>
   <ResizeObserver @resize="onResize">
     <OButton @click="changeFn">
       {{ content }}
-- 
Gitee


From 6a6aa302e251d4bdad9ab82e02ce9794014722cd Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 24 Dec 2022 15:49:46 +0800
Subject: [PATCH 04/28] =?UTF-8?q?=E4=BC=98=E5=8C=96resize=20observer?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.ts => click-outside.ts}             |  0
 .../src/components/directves/focus.ts         | 13 ++++++
 .../src/components/hooks/use-element.ts       | 20 +++++++++
 .../components/hooks/use-resize-observer.ts   |  6 ++-
 .../__demo__/ResizeObserver.vue               | 42 +++++++++++++++----
 .../resize-observer/resize-observer.ts        | 31 +++++++++-----
 packages/portal/src/router.ts                 | 14 ++++---
 pnpm-lock.yaml                                |  6 +++
 8 files changed, 105 insertions(+), 27 deletions(-)
 rename packages/opendesign/src/components/directves/{click-outside/index.ts => click-outside.ts} (100%)
 create mode 100644 packages/opendesign/src/components/directves/focus.ts
 create mode 100644 packages/opendesign/src/components/hooks/use-element.ts

diff --git a/packages/opendesign/src/components/directves/click-outside/index.ts b/packages/opendesign/src/components/directves/click-outside.ts
similarity index 100%
rename from packages/opendesign/src/components/directves/click-outside/index.ts
rename to packages/opendesign/src/components/directves/click-outside.ts
diff --git a/packages/opendesign/src/components/directves/focus.ts b/packages/opendesign/src/components/directves/focus.ts
new file mode 100644
index 00000000..2ecc79e4
--- /dev/null
+++ b/packages/opendesign/src/components/directves/focus.ts
@@ -0,0 +1,13 @@
+import { ObjectDirective } from 'vue';
+
+const vFocus: ObjectDirective = {
+  mounted(el: HTMLElement) {
+    console.log('focus');
+
+    el.focus();
+  }
+};
+
+export {
+  vFocus
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-element.ts b/packages/opendesign/src/components/hooks/use-element.ts
new file mode 100644
index 00000000..21a222ec
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-element.ts
@@ -0,0 +1,20 @@
+import { ObjectDirective } from 'vue';
+
+export type LifeCycleT = 'mounted' | 'updated' | 'unmounted'
+
+export function useElementDirective(onElementChange: (el: HTMLElement | null, type: LifeCycleT) => void) {
+  const directive: ObjectDirective = {
+    mounted(el: HTMLElement) {
+      onElementChange(el, 'mounted');
+    },
+    updated(el: HTMLElement) {
+      onElementChange(el, 'updated');
+    },
+    unmounted() {
+      onElementChange(null, 'unmounted');
+    }
+  };
+  return {
+    getElementDirective: directive
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index af556538..7e5c6b2c 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -5,16 +5,18 @@ export function useResizeObserver() {
   let ro: ResizeObserver | null = null;
 
   // 创建监听实例
-  const createResizeObserver = (el: HTMLElement, onResize: (en: ResizeObserverEntry) => void) => {
+  const createResizeObserver = (el: HTMLElement | null, onResize: (en: ResizeObserverEntry) => void) => {
     if (!el) {
-      return;
+      return null;
     }
+
     ro = new ResizeObserver((entries: ResizeObserverEntry[]) => {
       if (isFunction(onResize)) {
         onResize(entries[0]);
       }
     });
     ro.observe(el);
+    return ro;
   };
 
   // 销毁监听
diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
index fb48a546..f88fa01f 100644
--- a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
+++ b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 import { ResizeObserver } from '../index';
 import { OButton } from '../../button';
 import '../../button/style';
@@ -11,27 +11,53 @@ const changeFn = () => {
   content.value += `-${cnt} `;
 };
 
-const onResize = () => {
-  console.log('resized');
+const rlt = reactive({
+  size1: {
+    width: 0,
+    height: 0,
+  },
+  size2: {
+    width: 0,
+    height: 0,
+  },
+  visible1: true,
+  visible2: true,
+});
+
+const onResize = (entry: ResizeObserverEntry, size: 'size1' | 'size2') => {
+  rlt[size].width = entry.contentRect.width;
+  rlt[size].height = entry.contentRect.height;
+};
+
+const toggle = (key: 'visible1' | 'visible2') => {
+  rlt[key] = !rlt[key];
 };
 </script>
 <template>
   <h4>resize observer</h4>
 
-  <ResizeObserver @resize="onResize">
-    <div class="content" @click="changeFn">
+  <ResizeObserver @resize="(en) => onResize(en, 'size1')">
+    <div v-if="rlt.visible1" class="content" :name="content" @click="changeFn">
       {{ content }}
     </div>
+    <div v-else class="content" @click="changeFn">changed: {{ content }}</div>
+    <div @click="toggle('visible1')">toggle</div>
   </ResizeObserver>
-  <div style="margin-top: 30px"></div>
-  <ResizeObserver @resize="onResize">
-    <OButton @click="changeFn">
+  <div class="tip">width: {{ rlt.size1.width }}; height: {{ rlt.size1.height }}</div>
+
+  <ResizeObserver @resize="(en) => onResize(en, 'size2')">
+    <OButton v-if="rlt.visible2" @click="changeFn">
       {{ content }}
     </OButton>
+    <div @click="toggle('visible2')">toggle</div>
   </ResizeObserver>
+  <div class="tip">width: {{ rlt.size2.width }}; height: {{ rlt.size2.height }}</div>
 </template>
 <style lang="scss" scoped>
 .content {
   display: inline-block;
 }
+.tip {
+  margin: 16px 0 32px;
+}
 </style>
diff --git a/packages/opendesign/src/components/resize-observer/resize-observer.ts b/packages/opendesign/src/components/resize-observer/resize-observer.ts
index e93b1821..1ec31f4c 100644
--- a/packages/opendesign/src/components/resize-observer/resize-observer.ts
+++ b/packages/opendesign/src/components/resize-observer/resize-observer.ts
@@ -1,5 +1,7 @@
-import { defineComponent, onBeforeUnmount, onMounted, ref, cloneVNode, ComponentPublicInstance } from 'vue';
-import { useResizeObserver } from '../hooks';
+import { defineComponent, onBeforeUnmount, cloneVNode, withDirectives } from 'vue';
+import { useResizeObserver } from '../hooks/use-resize-observer';
+import { useElementDirective, LifeCycleT } from '../hooks/use-element';
+
 
 export default defineComponent({
   name: 'ResizeObserver',
@@ -7,28 +9,35 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const { createResizeObserver, destoryResizeObserver } = useResizeObserver();
 
-    const childRef = ref<HTMLElement | ComponentPublicInstance | null>(null);
+    let ro: ResizeObserver | null = null;
+
+    const { getElementDirective } = useElementDirective((el: HTMLElement | null, type: LifeCycleT) => {
+      if (type === 'updated') {
+        return;
+      }
+
+      if (ro) {
+        destoryResizeObserver();
+      }
 
-    onMounted(() => {
-      if (childRef.value) {
-        createResizeObserver((childRef.value as ComponentPublicInstance).$el || childRef.value, (entry: ResizeObserverEntry) => {
+      if (el) {
+        ro = createResizeObserver(el, (entry: ResizeObserverEntry) => {
           emit('resize', entry);
         });
       }
-
     });
 
     onBeforeUnmount(() => {
+      // 销毁监听
       destoryResizeObserver();
     });
 
     return () => {
       const children = slots.default?.();
-      if (children) {
-        return cloneVNode(children[0], { ref: childRef });
-      } else {
-        return null;
+      if (children && children.length > 0) {
+        children[0] = withDirectives(cloneVNode(children[0]), [[getElementDirective]]);
       }
+      return children;
     };
   },
 });
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index f3204227..a2858486 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -20,24 +20,26 @@ export const routes = [
     label: '开关',
     component: () => import('./pages/TheSwitch.vue'),
   },
-  {
-    path: '/popup',
-    name: 'Popup',
-    label: '浮层',
-    component: () => import('./pages/ThePopup.vue'),
-  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
     label: 'resize监听',
     component: () => import('./pages/TheResizeObserver.vue'),
   },
+  {
+    path: '/popup',
+    name: 'Popup',
+    label: '浮层',
+    component: () => import('./pages/ThePopup.vue'),
+  },
   {
     path: '/select',
     name: 'Select',
     label: '下拉框',
     component: () => import('./pages/TheSelect.vue'),
   },
+
+
 ];
 
 export const router = createRouter({
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54988091..33d58145 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,11 +22,13 @@ importers:
     specifiers:
       '@opensig/opensig-scripts': workspace:^0.0.1
       '@vue/shared': ^3.2.45
+      resize-observer-polyfill: ^1.5.1
       typescript: ^4.6.4
       vue: ^3.2.41
       vue-tsc: ^1.0.13
     dependencies:
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
+      resize-observer-polyfill: 1.5.1
     devDependencies:
       '@opensig/opensig-scripts': link:../scripts
       typescript: 4.9.3
@@ -1812,6 +1814,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /resize-observer-polyfill/1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+    dev: false
+
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
-- 
Gitee


From d8f6f476e936eaebcb917c7cbc33ead174b6f9d9 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 27 Dec 2022 16:15:08 +0800
Subject: [PATCH 05/28] =?UTF-8?q?=E4=BC=98=E5=8C=96popup=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |   6 +-
 .../opendesign/src/components/_shared/dom.ts  |  50 ++-
 .../src/components/popup/OPopup.vue           | 155 +++++---
 .../popup/__demo__/PopupContainer.vue         |  39 +-
 .../popup/__demo__/PopupPosition.vue          |   4 +-
 .../opendesign/src/components/popup/popup.ts  | 371 +++++++++++-------
 .../src/components/popup/style/index.scss     |   2 +
 .../opendesign/src/components/popup/types.ts  |   3 +
 .../resize-observer/resize-observer.ts        |   1 +
 9 files changed, 412 insertions(+), 219 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6b40df40..113afb5f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -40,7 +40,11 @@ module.exports = {
     'prefer-template': 'error',
     'prefer-spread': 'error',
     'no-var': 'error',
-    'max-lines-per-function': ['error', 100],
+    'max-lines-per-function': ['error', {
+      max: 100,
+      skipComments: true,
+      skipBlankLines: true
+    }],
     complexity: ['warn', 20],
     'max-depth': ['warn', 4],
     'max-len': ['warn', {
diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts
index 4ecdbd95..e6748c3e 100644
--- a/packages/opendesign/src/components/_shared/dom.ts
+++ b/packages/opendesign/src/components/_shared/dom.ts
@@ -1,28 +1,29 @@
+export type Direction = 'left' | 'right' | 'top' | 'bottom';
+
 export function isElement(el: any) {
   return (typeof HTMLElement === 'object')
     ? (el instanceof HTMLElement)
     : !!(el && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 9) && typeof el.nodeName === 'string');
 }
 
-export function isRootEl(el: HTMLElement | Window) {
-  return el === window || ['BODY', 'HTML'].includes((el as HTMLElement).tagName);
+export function isDocumentElement(el: HTMLElement | Window) {
+  return el === window || ['HTML'].includes((el as HTMLElement).tagName);
 }
 
 export function getScroll(el: HTMLElement | Window = window) {
   if (!el) {
     return {
-      left: 0,
-      top: 0
+      scrollLeft: 0,
+      scrollTop: 0
     };
   }
-  const isroot = isRootEl(el);
+  const isroot = isDocumentElement(el);
   return {
-    left: isroot ? window.scrollX : (el as HTMLElement).scrollLeft,
-    top: isroot ? window.scrollY : (el as HTMLElement).scrollTop,
+    scrollLeft: isroot ? window.scrollX : (el as HTMLElement).scrollLeft,
+    scrollTop: isroot ? window.scrollY : (el as HTMLElement).scrollTop,
   };
 }
-export function getRelativeBounding(el: HTMLElement, c: DOMRect) {
-  const e = el.getBoundingClientRect();
+export function getRelativeBounding(e: DOMRect, c: DOMRect) {
   return {
     top: e.top,
     bottom: e.bottom,
@@ -35,4 +36,35 @@ export function getRelativeBounding(el: HTMLElement, c: DOMRect) {
     offsetRight: e.right - c.left,
     offsetBottom: e.bottom - c.top,
   };
+}
+export type RelativeRect = ReturnType<typeof getRelativeBounding>
+
+export function getElementSize(el: HTMLElement | Window) {
+  return {
+    width: (el as Window).innerWidth || (el as HTMLElement).clientWidth,
+    height: (el as Window).innerHeight || (el as HTMLElement).clientHeight,
+    offsetWidth: (el as Window).innerWidth || (el as HTMLElement).offsetWidth,
+    offsetHeight: (el as Window).innerHeight || (el as HTMLElement).offsetHeight,
+  };
+}
+
+export function getElementBorder(el: HTMLElement, dir?: Direction | Direction[]) {
+  const style = window.getComputedStyle(el);
+  let d: Direction[] = [];
+
+  if (typeof dir === 'string') {
+    d = [dir];
+  } else {
+    d = Array.isArray(dir) ? dir : ['left', 'right', 'bottom', 'top'];
+  }
+  const rlt: {
+    left?: number,
+    right?: number,
+    top?: number,
+    bottom?: number,
+  } = {};
+  d.forEach(k => {
+    rlt[k] = parseFloat(style.getPropertyValue(`border-${k}-width`));
+  });
+  return rlt;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index c90fb194..62cb2378 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance } from 'vue';
+import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance, onUpdated } from 'vue';
 import { PopupPosition, PopupTrigger } from './types';
 import { listenOutClick } from '../directves';
 import { isElement } from '../_shared/dom';
 import { calcPopupStyle } from './popup';
+import { useResizeObserver } from '../hooks/use-resize-observer';
+import { ResizeObserver } from '../resize-observer';
 
 const props = defineProps({
   position: {
@@ -24,50 +26,50 @@ const props = defineProps({
   },
   container: {
     type: [String, Object] as PropType<string | HTMLElement>,
-    default: document.documentElement,
+    default: document.body,
+  },
+  hoverDelay: {
+    type: Number,
+    default: 100,
   },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
 
-const show = ref(false);
+const visible = ref(false);
 let targetEl: HTMLElement | null = null;
-let containerEl: HTMLElement | null = null;
+let containerEl: Ref<HTMLElement | null> = ref(null);
 const popWrap = ref<HTMLElement | null>(null);
-const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({});
+const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({ left: `${0}px`, top: `${0}px` });
 const popPosition = ref(props.position);
+// 是否在可视区域外
+const isOutside = ref(false);
+
+// 监听dom尺寸变化
+const { createResizeObserver, destoryResizeObserver } = useResizeObserver();
+
 // 处理popup位置
 const updatePopupStyle = () => {
-  if (!targetEl || !popWrap.value || !containerEl) {
+  if (!targetEl || !popWrap.value || !containerEl.value) {
     return;
   }
+  console.log('update style', popWrap.value);
 
-  const { style, position } = calcPopupStyle(popWrap.value, targetEl, containerEl, props.position);
+  const { style, position, isOutside: out } = calcPopupStyle(popWrap.value, targetEl, containerEl.value, props.position);
+  isOutside.value = out;
 
-  popStyle.top = `${style.top}px`;
-  popStyle.left = `${style.left}px`;
-  popPosition.value = position;
-};
+  if (style && !out) {
+    popStyle.top = `${Math.round(style.top)}px`;
+    popStyle.left = `${Math.round(style.left)}px`;
 
-const showFn = () => {
-  if (!show.value) {
-    show.value = true;
-    emits('update:visible', true);
-    nextTick(() => {
-      updatePopupStyle();
-    });
-  }
-};
-const hideFn = () => {
-  if (show.value) {
-    show.value = false;
-    emits('update:visible', false);
+    popPosition.value = position;
   }
 };
+
 watch(
   () => props.visible,
   (val) => {
-    show.value = val;
+    visible.value = val;
     if (val) {
       nextTick(() => {
         updatePopupStyle();
@@ -76,8 +78,42 @@ watch(
   }
 );
 
+let visibleTimer = 0;
+const clearVisibleTimer = () => {
+  if (visibleTimer) {
+    window.clearTimeout(visibleTimer);
+    visibleTimer = 0;
+  }
+};
+
+// 更新可见状态，支持延迟更新
+const updateVisible = (isVisible: boolean, delay?: number) => {
+  if (isVisible === visible.value && visibleTimer) {
+    return;
+  }
+
+  const update = () => {
+    visible.value = isVisible;
+    emits('update:visible', isVisible);
+    // if (isVisible) {
+    //   nextTick(() => {
+    //     updatePopupStyle();
+    //   });
+    // }
+  };
+
+  if (delay) {
+    clearVisibleTimer();
+    if (isVisible !== visible.value) {
+      visibleTimer = window.setTimeout(update, delay);
+    }
+  } else {
+    update();
+  }
+};
+
 // 监听元素的触发事件
-const handleTrigger = (el: HTMLElement | null) => {
+const bindTrigger = (el: HTMLElement | null) => {
   if (!el) {
     return [];
   }
@@ -85,14 +121,31 @@ const handleTrigger = (el: HTMLElement | null) => {
 
   const listeners: Array<() => void> = [];
 
+  const showFn = () => {
+    if (visible.value === false) {
+      updateVisible(true);
+    }
+  };
+  const hideFn = () => {
+    if (visible.value === true) {
+      updateVisible(false);
+    }
+  };
+
   const triggers = Array.isArray(props.trigger) ? props.trigger : [props.trigger];
   triggers.forEach((tr: PopupTrigger) => {
     if (tr === PopupTrigger.HOVER) {
-      el?.addEventListener('mouseover', showFn);
-      el?.addEventListener('mouseleave', hideFn);
+      const enterFn = () => {
+        updateVisible(true, props.hoverDelay);
+      };
+      const leavefn = () => {
+        updateVisible(false, props.hoverDelay);
+      };
+      el?.addEventListener('mouseover', enterFn);
+      el?.addEventListener('mouseleave', leavefn);
       const removeFn = () => {
-        el?.removeEventListener('mouseover', showFn);
-        el?.removeEventListener('mouseleave', hideFn);
+        el?.removeEventListener('mouseover', enterFn);
+        el?.removeEventListener('mouseleave', leavefn);
       };
       listeners.push(removeFn);
     } else if (tr === PopupTrigger.FOUCS) {
@@ -131,52 +184,66 @@ const handleTrigger = (el: HTMLElement | null) => {
   return listeners;
 };
 
-let triggerListener: ReturnType<typeof handleTrigger> = [];
+let triggerListener: ReturnType<typeof bindTrigger> = [];
 
 // 触发元素为组件ref，处理事件触发
 watch(
   () => props.target,
   (ele) => {
     if (ele && (ele as ComponentPublicInstance).$el) {
-      triggerListener = handleTrigger((ele as ComponentPublicInstance).$el);
+      triggerListener = bindTrigger((ele as ComponentPublicInstance).$el);
     }
   }
 );
+
+const onResize = () => {
+  if (visible.value) {
+    updatePopupStyle();
+  }
+};
+
 onMounted(() => {
   // 在mounted事件后再显示，避免找不到container
-  show.value = props.visible;
+  visible.value = props.visible;
 
   // 触发元素为dom或者选择器，处理事件触发
   nextTick(() => {
     if (typeof props.container === 'string') {
-      containerEl = document.querySelector(props.container);
+      containerEl.value = document.querySelector(props.container);
     } else {
-      containerEl = props.container;
+      containerEl.value = props.container;
     }
-
-    if (show.value) {
+    // 初始为true时，更新样式
+    if (visible.value) {
       updatePopupStyle();
     }
 
+    // 绑定触发元素事件
     if (typeof props.target === 'string') {
-      triggerListener = handleTrigger(document.querySelector(props.target));
+      triggerListener = bindTrigger(document.querySelector(props.target));
     } else if (isElement(props.target)) {
-      triggerListener = handleTrigger(props.target as HTMLElement);
+      triggerListener = bindTrigger(props.target as HTMLElement);
     }
   });
 });
+
 onUnmounted(() => {
+  // 移除触发事件
   triggerListener.forEach((fn) => {
     fn();
   });
+  // 销毁popup 的 resize监听
+  destoryResizeObserver();
 });
 </script>
 <template>
-  <teleport v-if="show" :to="props.container">
-    <div ref="popWrap" class="o-popup" :style="popStyle">
-      <div class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
-        <slot></slot>
+  <teleport v-if="visible" :to="props.container">
+    <ResizeObserver @resize="onResize">
+      <div v-show="!isOutside" ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs">
+        <div class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
+          <slot></slot>
+        </div>
       </div>
-    </div>
+    </ResizeObserver>
   </teleport>
 </template>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index 1361e38b..acc4e4fc 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -14,7 +14,7 @@ const btn6 = ref(null);
 const btn7 = ref(null);
 const btn8 = ref(null);
 const btn9 = ref(null);
-// const visible = ref(false);
+const visible = ref(true);
 </script>
 <template>
   <h4>popup container</h4>
@@ -22,13 +22,13 @@ const btn9 = ref(null);
     <div class="content">
       <OButton ref="btn1" class="btn1">TL btn1 </OButton>
       <OButton ref="btn2" class="btn2">TR btn2 </OButton>
-      <OButton ref="btn3" class="btn3"> btn3 </OButton>
+      <OButton ref="btn3" class="btn3">TL btn3 </OButton>
       <OButton ref="btn4" class="btn4">LT btn4 </OButton>
-      <OButton ref="btn5" class="btn5"> btn5 </OButton>
-      <OButton ref="btn6" class="btn6"> btn6 </OButton>
-      <OButton ref="btn7" class="btn7"> btn7 </OButton>
-      <OButton ref="btn8" class="btn8"> btn8 </OButton>
-      <OButton ref="btn9" class="btn9"> btn9 </OButton>
+      <OButton ref="btn5" class="btn5">TL btn5 </OButton>
+      <OButton ref="btn6" class="btn6">TL btn6 </OButton>
+      <OButton ref="btn7" class="btn7">LEFT btn7 </OButton>
+      <OButton ref="btn8" class="btn8">BL btn8 </OButton>
+      <OButton ref="btn9" class="btn9">TL btn9 </OButton>
 
       <OPopup :position="PopupPosition.TL" :target="btn1" container="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
@@ -38,7 +38,7 @@ const btn9 = ref(null);
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn3" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn3" container="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
@@ -58,8 +58,8 @@ const btn9 = ref(null);
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn8" container="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
+      <OPopup :position="PopupPosition.BL" :target="btn8" container="#wrap" :trigger="PopupTrigger.CLICK">
+        <div class="tip">{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
       <OPopup :position="PopupPosition.TL" :target="btn9" container="#wrap" :trigger="PopupTrigger.CLICK">
@@ -71,21 +71,27 @@ const btn9 = ref(null);
 </template>
 <style lang="scss" scoped>
 #wrap {
-  height: 40vh;
+  height: 120vh;
   width: 50vw;
   overflow: auto;
-  border: 1px solid #333;
+  border: 10px solid #333;
   position: relative;
+  z-index: 10;
+  background-color: #eee;
+  // overflow: visible;
 }
 .content {
-  height: 30vh;
-  width: 70vw;
+  height: 140vh;
+  width: 60vw;
 
   position: relative;
   :deep(.o-btn) {
     position: absolute;
   }
 }
+.tip {
+  white-space: nowrap;
+}
 .btn1 {
   left: 0;
   top: 0;
@@ -103,7 +109,7 @@ const btn9 = ref(null);
   top: 11vh;
 }
 .btn5 {
-  left: 45vw;
+  left: 20vw;
   top: 15vh;
 }
 .btn6 {
@@ -116,7 +122,8 @@ const btn9 = ref(null);
 }
 .btn8 {
   left: 45vw;
-  bottom: 0;
+  // bottom: 0;
+  top: 100vh;
 }
 .btn9 {
   right: 0;
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
index ac28e33a..39ab5788 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
@@ -25,7 +25,7 @@ const btn12 = ref(null);
       <OButton ref="btn1"> TL </OButton>
       <OPopup :position="PopupPosition.TL" :target="btn1">TL {{ content }} </OPopup>
       <OButton ref="btn2"> TOP </OButton>
-      <OPopup :position="PopupPosition.TOP" :target="btn2">T {{ content }} </OPopup>
+      <OPopup :position="PopupPosition.TOP" :target="btn2" trigger="click">T {{ content }} </OPopup>
       <OButton ref="btn3">TR</OButton>
       <OPopup :position="PopupPosition.TR" :target="btn3">TR {{ content }} </OPopup>
     </div>
@@ -51,7 +51,7 @@ const btn12 = ref(null);
       <OButton ref="btn10"> BL </OButton>
       <OPopup :position="PopupPosition.BL" :target="btn10">BL {{ content }} </OPopup>
       <OButton ref="btn11"> BOTTOM </OButton>
-      <OPopup :position="PopupPosition.BOTTOM" :target="btn11">B {{ content }} </OPopup>
+      <OPopup :position="PopupPosition.BOTTOM" :target="btn11" trigger="click">B {{ content }} </OPopup>
       <OButton ref="btn12"> BR </OButton>
       <OPopup :position="PopupPosition.BR" :target="btn12">BR {{ content }} </OPopup>
     </div>
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index aae26b6f..050e6a34 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -1,36 +1,165 @@
-import { getRelativeBounding, getScroll, isRootEl } from '../_shared/dom';
-import { PopupPosition } from './types';
-
-enum Direction {
-  LEFT = 'left',
-  RIGHT = 'right',
-  TOP = 'top',
-  BOTTOM = 'bottom',
+import { getElementBorder, getElementSize, getScroll } from '../_shared/dom';
+import type { Direction } from '../_shared/dom';
+import { PopupPosition, FullPosition } from './types';
+
+interface Pos {
+  left: number,
+  top: number
+}
+interface DomContentRect {
+  left: number,
+  right: number,
+  top: number,
+  bottom: number,
+}
+
+type ElementSize = ReturnType<typeof getElementSize>
+
+// 根据元素Rect判断元素是否在视窗外
+function isOutsideViewport(tRect: DOMRect) {
+  return tRect.bottom < 0 || tRect.right < 0 || tRect.top > window.innerHeight || tRect.left > window.innerWidth;
+}
+// 获取wrapper content box范围，因为绝对定位需要排除border
+function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): DomContentRect {
+  const { left = 0, top = 0, right = 0, bottom = 0 } = getElementBorder(wrapperEl);
+  const rect = wrapperRect || wrapperEl.getBoundingClientRect();
+  return {
+    left: rect.left + left,
+    top: rect.top + top,
+    right: rect.right - right,
+    bottom: rect.bottom - bottom
+  };
+}
+// 根据position计算popup的位置
+function getPopupViewOffset(position: FullPosition, t: DOMRect, p: DOMRect): Pos {
+  const formula: {
+    [k in FullPosition]: { left: number, top: number }
+  } = {
+    top: {
+      left: t.left + t.width / 2 - p.width / 2,
+      top: t.top - p.height
+    },
+    tl: {
+      left: t.left,
+      top: t.top - p.height
+    },
+    tr: {
+      left: t.right - p.width,
+      top: t.top - p.height
+    },
+    bottom: {
+      left: t.left + t.width / 2 - p.width / 2,
+      top: t.bottom
+    },
+    bl: {
+      left: t.left,
+      top: t.bottom
+    },
+    br: {
+      left: t.right - p.width,
+      top: t.bottom
+    },
+    left: {
+      left: t.left - p.width,
+      top: t.top + t.height / 2 - p.height / 2
+    },
+    lt: {
+      left: t.left - p.width,
+      top: t.top
+    },
+    lb: {
+      left: t.left - p.width,
+      top: t.bottom - p.height
+    },
+    right: {
+      left: t.right,
+      top: t.top + t.height / 2 - p.height / 2
+    },
+    rt: {
+      left: t.right,
+      top: t.top
+    },
+    rb: {
+      left: t.right,
+      top: t.bottom - p.height
+
+    }
+  };
+  return formula[position] || { left: 0, top: 0 };
+}
+// 根据视窗与相对容器，返回popup的位置范围
+function getWrapperViewEdge(pSize: ElementSize, wrapperRect?: DomContentRect) {
+  const viewport = {
+    left: 0,
+    right: window.innerWidth,
+    top: 0,
+    bottom: window.innerHeight
+  };
+
+  if (!wrapperRect) {
+    return viewport;
+  }
+  return {
+    left: Math.max(viewport.left, wrapperRect.left),
+    top: Math.max(viewport.top, wrapperRect.top),
+    right: Math.min(viewport.right, wrapperRect.right) - pSize.width,
+    bottom: Math.min(viewport.bottom, wrapperRect.bottom) - pSize.height,
+  };
+}
+// 根据视窗与相对容器，返回popup的位置范围
+function getPopupEdge(pSize: ElementSize, targetRect: DOMRect) {
+  const { left, right, top, bottom } = targetRect;
+  const { width, height } = pSize;
+  return {
+    left: left - width,
+    top: top - height,
+    right: right + width,
+    bottom: bottom + height
+  };
+}
+
+// 计算相对于wrapper的位置信息
+function getPopupWrapOffset(pos: Pos, wrapperEl: HTMLElement | null, wrapperContentRect?: DomContentRect) {
+  if (!wrapperEl) {
+    return pos;
+  }
+  const cs = getScroll(wrapperEl);
+  if (wrapperContentRect) {
+    return {
+      left: pos.left + cs.scrollLeft - wrapperContentRect.left,
+      top: pos.top - wrapperContentRect.top + cs.scrollTop
+    };
+  }
+  return {
+    left: pos.left + cs.scrollLeft,
+    top: pos.top + cs.scrollTop
+  };
 }
+// 根据position获取方向
 function getDirection(position: PopupPosition): Direction {
   switch (position) {
     case PopupPosition.TL:
     case PopupPosition.TR:
     case PopupPosition.TOP:
-      return Direction.TOP;
+      return 'top';
     case PopupPosition.BL:
     case PopupPosition.BR:
     case PopupPosition.BOTTOM:
-      return Direction.BOTTOM;
+      return 'bottom';
     case PopupPosition.LT:
     case PopupPosition.LB:
     case PopupPosition.LEFT:
-      return Direction.LEFT;
+      return 'left';
     case PopupPosition.RT:
     case PopupPosition.RB:
     case PopupPosition.RIGHT:
-      return Direction.RIGHT;
+      return 'right';
   }
 }
-
-function fixPosition(position: PopupPosition, direction: Direction) {
+// 调整position
+function adjustPosition(position: PopupPosition, direction: Direction) {
   const fixFn = {
-    [Direction.TOP]: (p: PopupPosition) => {
+    top: (p: PopupPosition) => {
       if (p === PopupPosition.BOTTOM) {
         return PopupPosition.TOP;
       } else if (p === PopupPosition.BL) {
@@ -40,7 +169,7 @@ function fixPosition(position: PopupPosition, direction: Direction) {
       }
       return p;
     },
-    [Direction.BOTTOM]: (p: PopupPosition) => {
+    bottom: (p: PopupPosition) => {
       if (p === PopupPosition.TOP) {
         return PopupPosition.BOTTOM;
       } else if (p === PopupPosition.TL) {
@@ -50,7 +179,7 @@ function fixPosition(position: PopupPosition, direction: Direction) {
       }
       return p;
     },
-    [Direction.LEFT]: (p: PopupPosition) => {
+    left: (p: PopupPosition) => {
       if (p === PopupPosition.RIGHT) {
         return PopupPosition.LEFT;
       } else if (p === PopupPosition.RT) {
@@ -60,7 +189,7 @@ function fixPosition(position: PopupPosition, direction: Direction) {
       }
       return p;
     },
-    [Direction.RIGHT]: (p: PopupPosition) => {
+    right: (p: PopupPosition) => {
       if (p === PopupPosition.LEFT) {
         return PopupPosition.RIGHT;
       } else if (p === PopupPosition.LT) {
@@ -75,158 +204,106 @@ function fixPosition(position: PopupPosition, direction: Direction) {
   const fn = fixFn[direction];
   return fn ? fn(position) : position;
 }
+// 根据popup的极值调整
+function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSize, pRect: DOMRect, tRect: DOMRect, wRect?: DomContentRect) {
+  const { top, left } = pPosition;
+  const edge = getWrapperViewEdge(pSize, wRect);
 
-function getPopupOffset(targetEl: HTMLElement, position: PopupPosition, popupRect: DOMRect, containerRect: DOMRect) {
-  const t = getRelativeBounding(targetEl, containerRect);
-  const p = popupRect;
-  switch (position) {
-    case PopupPosition.LT: {
-      return {
-        top: t.offsetTop,
-        left: t.offsetLeft - p.width,
-      };
-    }
-    case PopupPosition.LB: {
-      return {
-        top: t.offsetTop + t.height - p.height,
-        left: t.offsetLeft - p.width,
-      };
-    }
-    case PopupPosition.LEFT: {
-      return {
-        top: t.offsetTop + Math.round(t.height / 2) - Math.round(p.height / 2),
-        left: t.offsetLeft - p.width,
-      };
-    }
-    case PopupPosition.RT: {
-      return {
-        top: t.offsetTop,
-        left: t.offsetLeft + t.width,
-      };
-    }
-    case PopupPosition.RB: {
-      return {
-        top: t.offsetTop + t.height - p.height,
-        left: t.offsetLeft + t.width,
-      };
-    }
-    case PopupPosition.RIGHT: {
-      return {
-        top: t.offsetTop + Math.round(t.height / 2) - Math.round(p.height / 2),
-        left: t.offsetLeft + t.width,
-      };
-    }
-    case PopupPosition.TL: {
-      return {
-        top: t.offsetTop - p.height,
-        left: t.offsetLeft,
-      };
-    }
-    case PopupPosition.TR: {
-      return {
-        top: t.offsetTop - p.height,
-        left: t.offsetLeft + t.width - p.width,
-      };
+  let fixedPosition = position;
+  let style = pPosition;
+
+  const d = getDirection(position);
+  if (d === 'top') {
+    if (edge.top > top) {
+      fixedPosition = adjustPosition(position, 'bottom');
+      style = getPopupViewOffset(fixedPosition, tRect, pRect);
     }
-    case PopupPosition.TOP: {
-      return {
-        top: t.offsetTop - p.height,
-        left: t.offsetLeft + Math.round(t.width / 2) - Math.round(p.width / 2),
-      };
+  } else if (d === 'left') {
+    if (edge.left > left) {
+      fixedPosition = adjustPosition(position, 'right');
+      style = getPopupViewOffset(fixedPosition, tRect, pRect);
     }
-    case PopupPosition.BL: {
-      return {
-        top: t.offsetTop + t.height,
-        left: t.offsetLeft,
-      };
+  } else if (d === 'right') {
+    if (edge.right < left) {
+      fixedPosition = adjustPosition(position, 'left');
+      style = getPopupViewOffset(fixedPosition, tRect, pRect);
     }
-    case PopupPosition.BR: {
-      return {
-        top: t.offsetTop + t.height,
-        left: t.offsetLeft + t.width - p.width
-      };
+  } else if (d === 'bottom') {
+    if (edge.bottom < top) {
+      fixedPosition = adjustPosition(position, 'top');
+      style = getPopupViewOffset(fixedPosition, tRect, pRect);
     }
-    case PopupPosition.BOTTOM: {
-      return {
-        top: t.offsetTop + t.height,
-        left: t.offsetLeft + Math.round(t.width / 2) - Math.round(p.width / 2),
-      };
+  }
+
+  const popEdge = getPopupEdge(pSize, tRect);
+
+  if (['top', 'bottom'].includes(d)) {
+    if (edge.left > left) {
+      style.left = edge.left < popEdge.right ? edge.left : popEdge.right;
+    } else if (edge.right < left) {
+      style.left = edge.right > popEdge.left ? edge.right : popEdge.left;
     }
-    default: {
-      return {
-        top: 0,
-        left: 0
-      };
+  }
+  if (['left', 'right'].includes(d)) {
+    if (edge.top > top) {
+      style.top = edge.top < popEdge.bottom ? edge.top : popEdge.bottom;
+    } else if (edge.bottom < top) {
+      style.top = edge.bottom < popEdge.top ? edge.bottom : popEdge.top;
     }
   }
-}
 
+  return {
+    position: fixedPosition,
+    style,
+  };
+}
 
 // 处理popup位置
 export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, container: HTMLElement, position: PopupPosition,
   { adaptive = true }: { adaptive?: boolean } = {}) {
 
-  const cRect = container.getBoundingClientRect();
+  const tRect = targetEl.getBoundingClientRect();
+
+  // 如果target在视窗外，不显示popup
+  const isOutside = isOutsideViewport(tRect);
+  if (isOutside) {
+    return {
+      isOutside: isOutside
+    };
+  }
+
   const pRect = popupEl.getBoundingClientRect();
+  const pSize = getElementSize(popupEl);
 
-  const { left, top } = getPopupOffset(targetEl, position, pRect, cRect);
+  // 根据position计算popup相对视窗的位置
+  let style = getPopupViewOffset(position, tRect, pRect);
 
-  let fixedPosition = position;
-  let style = {
-    left,
-    top
-  };
-  // 自适应容器边缘
-  if (adaptive) {
-    const edge = {
-      left: 0,
-      top: 0,
-      right: Math.floor(cRect.width) - Math.ceil(pRect.width),
-      bottom: Math.floor(cRect.height) - Math.ceil(pRect.height),
-    };
-    const d = getDirection(position);
-    if (d === Direction.TOP && edge.top > top) {
-      fixedPosition = fixPosition(position, Direction.BOTTOM);
-      style = getPopupOffset(targetEl, fixedPosition, pRect, cRect);
-    }
-    if (d === Direction.LEFT && edge.left > left) {
-      fixedPosition = fixPosition(position, Direction.RIGHT);
-      style = getPopupOffset(targetEl, fixedPosition, pRect, cRect);
-    }
-    if (d === Direction.RIGHT && edge.right < left) {
-      fixedPosition = fixPosition(position, Direction.LEFT);
-      style = getPopupOffset(targetEl, fixedPosition, pRect, cRect);
-    }
-    if (d === Direction.BOTTOM && edge.bottom < top) {
-      fixedPosition = fixPosition(position, Direction.TOP);
-      style = getPopupOffset(targetEl, fixedPosition, pRect, cRect);
-    }
+  const wrapperEl = popupEl.offsetParent as HTMLElement | null;
+  const wrapperRect = wrapperEl?.getBoundingClientRect();
+  let wrapperContentRect = wrapperEl ? getWrapperContentRect(wrapperEl, wrapperRect) : undefined;
 
-    if ([Direction.TOP, Direction.BOTTOM].includes(d)) {
-      if (edge.left > left) {
-        style.left = 0;
-      } else if (edge.right < left) {
-        style.left = edge.right;
-      }
-    }
-    if ([Direction.LEFT, Direction.RIGHT].includes(d)) {
-      if (edge.top > top) {
-        style.top = 0;
-      } else if (edge.bottom < top) {
-        style.top = edge.bottom;
-      }
+  // wrapper为body时，如果body有偏移，但position值为static，不需要计算wrapper的content rect。
+  if (wrapperEl?.nodeName === 'BODY' && wrapperContentRect && (wrapperContentRect?.top > 0 || wrapperContentRect?.left > 0)) {
+    const stylePosition = window.getComputedStyle(wrapperEl).getPropertyValue('position');
+    if (stylePosition === 'static') {
+      wrapperContentRect = undefined;
     }
   }
 
-  // 需要加上滚动值，如果为body，则不需要
-  if (!isRootEl(container)) {
-    const cs = getScroll(container);
-    style.left += cs.left;
-    style.top += cs.top;
+  let fixedPosition = position;
+  // 自适应容器边缘
+  if (adaptive) {
+    const rlt = adjustOffset(position, style, pSize, pRect, tRect, wrapperContentRect);
+    fixedPosition = rlt.position;
+    style = rlt.style;
   }
 
+  style = getPopupWrapOffset(style, wrapperEl, wrapperContentRect);
+
   return {
     style,
-    position: fixedPosition
+    position: fixedPosition,
+    isOutside
   };
-};
\ No newline at end of file
+};
+
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index e6a48f84..8df06ea4 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -3,6 +3,8 @@
 .o-popup {
   position: absolute;
   z-index: 100;
+  pointer-events: none;
+  min-width: 150px;
 }
 .o-popup-wrap {
   background-color: var(--popup-bg);
diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts
index 20286519..905f935d 100644
--- a/packages/opendesign/src/components/popup/types.ts
+++ b/packages/opendesign/src/components/popup/types.ts
@@ -13,6 +13,9 @@ export enum PopupPosition {
   BR = 'br', //bottom-right,
 }
 
+
+export type FullPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+
 export enum PopupTrigger {
   NULL = 'null',
   HOVER = 'hover',
diff --git a/packages/opendesign/src/components/resize-observer/resize-observer.ts b/packages/opendesign/src/components/resize-observer/resize-observer.ts
index 1ec31f4c..a1aa60dc 100644
--- a/packages/opendesign/src/components/resize-observer/resize-observer.ts
+++ b/packages/opendesign/src/components/resize-observer/resize-observer.ts
@@ -22,6 +22,7 @@ export default defineComponent({
 
       if (el) {
         ro = createResizeObserver(el, (entry: ResizeObserverEntry) => {
+          // 触发resize事件
           emit('resize', entry);
         });
       }
-- 
Gitee


From 8934206c51457ae3d12686dcf260198d7a817278 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 27 Dec 2022 16:46:59 +0800
Subject: [PATCH 06/28] =?UTF-8?q?[popup]=E4=BF=AE=E5=A4=8Dv-model=E5=86=85?=
 =?UTF-8?q?=E9=83=A8emit=E5=8F=98=E5=8C=96=E6=97=B6=EF=BC=8Cwatch=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=E8=A7=A6=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/components/popup/OPopup.vue       | 6 +++++-
 packages/opendesign/src/components/popup/popup.ts         | 2 ++
 packages/opendesign/src/components/popup/style/index.scss | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 62cb2378..ca035ea5 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -69,6 +69,9 @@ const updatePopupStyle = () => {
 watch(
   () => props.visible,
   (val) => {
+    if (visible.value === val) {
+      return;
+    }
     visible.value = val;
     if (val) {
       nextTick(() => {
@@ -196,8 +199,9 @@ watch(
   }
 );
 
-const onResize = () => {
+const onResize = (r) => {
   if (visible.value) {
+    console.log(r.contentRect.width, r.contentRect.height);
     updatePopupStyle();
   }
 };
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index 050e6a34..417167db 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -208,6 +208,7 @@ function adjustPosition(position: PopupPosition, direction: Direction) {
 function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSize, pRect: DOMRect, tRect: DOMRect, wRect?: DomContentRect) {
   const { top, left } = pPosition;
   const edge = getWrapperViewEdge(pSize, wRect);
+  console.log('1', pSize, edge, pPosition);
 
   let fixedPosition = position;
   let style = pPosition;
@@ -251,6 +252,7 @@ function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSiz
       style.top = edge.bottom < popEdge.top ? edge.bottom : popEdge.top;
     }
   }
+  console.log('2', popEdge, fixedPosition);
 
   return {
     position: fixedPosition,
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index 8df06ea4..c94c3c3c 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -4,7 +4,7 @@
   position: absolute;
   z-index: 100;
   pointer-events: none;
-  min-width: 150px;
+  min-width: 120px;
 }
 .o-popup-wrap {
   background-color: var(--popup-bg);
-- 
Gitee


From 875b04c285aaa35c15c4910d05c64ead0f796519 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 27 Dec 2022 17:52:37 +0800
Subject: [PATCH 07/28] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dhover=20out=E4=B8=8D?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           | 106 ++++--------------
 .../popup/__demo__/PopupVisible.vue           |   2 +-
 .../opendesign/src/components/popup/popup.ts  |  90 ++++++++++++++-
 3 files changed, 109 insertions(+), 89 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index ca035ea5..5d86d5aa 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance, onUpdated } from 'vue';
+import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance } from 'vue';
 import { PopupPosition, PopupTrigger } from './types';
-import { listenOutClick } from '../directves';
 import { isElement } from '../_shared/dom';
-import { calcPopupStyle } from './popup';
+import { calcPopupStyle, bindTrigger } from './popup';
 import { useResizeObserver } from '../hooks/use-resize-observer';
 import { ResizeObserver } from '../resize-observer';
 
@@ -90,118 +89,55 @@ const clearVisibleTimer = () => {
 };
 
 // 更新可见状态，支持延迟更新
+// let visibleTo = visible.value;
 const updateVisible = (isVisible: boolean, delay?: number) => {
-  if (isVisible === visible.value && visibleTimer) {
+  if (isVisible === visible.value && visibleTimer === 0) {
     return;
   }
 
   const update = () => {
+    if (visible.value === isVisible) {
+      return;
+    }
     visible.value = isVisible;
+    isOutside.value = false;
     emits('update:visible', isVisible);
-    // if (isVisible) {
-    //   nextTick(() => {
-    //     updatePopupStyle();
-    //   });
-    // }
   };
 
   if (delay) {
     clearVisibleTimer();
-    if (isVisible !== visible.value) {
-      visibleTimer = window.setTimeout(update, delay);
-    }
+    visibleTimer = window.setTimeout(update, delay);
   } else {
     update();
   }
 };
 
-// 监听元素的触发事件
-const bindTrigger = (el: HTMLElement | null) => {
+let triggerListener: ReturnType<typeof bindTrigger> = [];
+const bindEvent = (el: HTMLElement | null) => {
   if (!el) {
-    return [];
+    return;
   }
-  targetEl = el;
-
-  const listeners: Array<() => void> = [];
-
-  const showFn = () => {
-    if (visible.value === false) {
-      updateVisible(true);
-    }
-  };
-  const hideFn = () => {
-    if (visible.value === true) {
-      updateVisible(false);
-    }
-  };
 
+  targetEl = el;
   const triggers = Array.isArray(props.trigger) ? props.trigger : [props.trigger];
-  triggers.forEach((tr: PopupTrigger) => {
-    if (tr === PopupTrigger.HOVER) {
-      const enterFn = () => {
-        updateVisible(true, props.hoverDelay);
-      };
-      const leavefn = () => {
-        updateVisible(false, props.hoverDelay);
-      };
-      el?.addEventListener('mouseover', enterFn);
-      el?.addEventListener('mouseleave', leavefn);
-      const removeFn = () => {
-        el?.removeEventListener('mouseover', enterFn);
-        el?.removeEventListener('mouseleave', leavefn);
-      };
-      listeners.push(removeFn);
-    } else if (tr === PopupTrigger.FOUCS) {
-      el?.addEventListener('focusin', showFn);
-      el?.addEventListener('focusout', hideFn);
-      const removeFn = () => {
-        el?.removeEventListener('focusin', showFn);
-        el?.removeEventListener('focusout', hideFn);
-      };
-      listeners.push(removeFn);
-    } else if (tr === PopupTrigger.CLICK) {
-      el?.addEventListener('click', showFn);
-
-      const removeFn = listenOutClick(el, hideFn);
-
-      listeners.push(() => {
-        el?.removeEventListener('click', showFn);
-      });
-      listeners.push(removeFn);
-    } else if (tr === PopupTrigger.CONTEXT_MENU) {
-      const fn = (e: Event) => {
-        e.preventDefault();
-        showFn();
-      };
-      el?.addEventListener('contextmenu', fn);
-
-      const removeFn = listenOutClick(el, hideFn);
-
-      listeners.push(() => {
-        el?.removeEventListener('contextmenu', fn);
-      });
-      listeners.push(removeFn);
-    }
+  triggerListener = bindTrigger(el, triggers, {
+    updateFn: updateVisible,
+    hoverDelay: props.hoverDelay,
   });
-
-  return listeners;
 };
 
-let triggerListener: ReturnType<typeof bindTrigger> = [];
-
 // 触发元素为组件ref，处理事件触发
 watch(
   () => props.target,
   (ele) => {
-    if (ele && (ele as ComponentPublicInstance).$el) {
-      triggerListener = bindTrigger((ele as ComponentPublicInstance).$el);
+    if (ele) {
+      bindEvent((ele as ComponentPublicInstance).$el);
     }
   }
 );
 
-const onResize = (r) => {
+const onResize = () => {
   if (visible.value) {
-    console.log(r.contentRect.width, r.contentRect.height);
     updatePopupStyle();
   }
 };
@@ -224,9 +160,9 @@ onMounted(() => {
 
     // 绑定触发元素事件
     if (typeof props.target === 'string') {
-      triggerListener = bindTrigger(document.querySelector(props.target));
+      bindEvent(document.querySelector(props.target));
     } else if (isElement(props.target)) {
-      triggerListener = bindTrigger(props.target as HTMLElement);
+      bindEvent(props.target as HTMLElement);
     }
   });
 });
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
index 8da50230..3cec7043 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
@@ -20,7 +20,7 @@ setTimeout(() => {
       <OButton ref="btn1" class="btn">Button</OButton>
       <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn1">TL {{ content }} </OPopup>
       <OButton ref="btn2" class="btn"> TOP </OButton>
-      <OPopup v-model:visible="visible" :position="PopupPosition.BOTTOM" :target="btn2" :trigger="PopupTrigger.NULL">T {{ content }} </OPopup>
+      <OPopup :visible="visible" :position="PopupPosition.BOTTOM" :target="btn2" :trigger="PopupTrigger.NULL">T {{ content }} </OPopup>
     </div>
   </section>
 </template>
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index 417167db..b1bd251a 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -1,6 +1,7 @@
 import { getElementBorder, getElementSize, getScroll } from '../_shared/dom';
 import type { Direction } from '../_shared/dom';
-import { PopupPosition, FullPosition } from './types';
+import { PopupPosition, FullPosition, PopupTrigger } from './types';
+import { listenOutClick } from '../directves';
 
 interface Pos {
   left: number,
@@ -19,6 +20,7 @@ type ElementSize = ReturnType<typeof getElementSize>
 function isOutsideViewport(tRect: DOMRect) {
   return tRect.bottom < 0 || tRect.right < 0 || tRect.top > window.innerHeight || tRect.left > window.innerWidth;
 }
+
 // 获取wrapper content box范围，因为绝对定位需要排除border
 function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): DomContentRect {
   const { left = 0, top = 0, right = 0, bottom = 0 } = getElementBorder(wrapperEl);
@@ -30,6 +32,7 @@ function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): D
     bottom: rect.bottom - bottom
   };
 }
+
 // 根据position计算popup的位置
 function getPopupViewOffset(position: FullPosition, t: DOMRect, p: DOMRect): Pos {
   const formula: {
@@ -87,6 +90,7 @@ function getPopupViewOffset(position: FullPosition, t: DOMRect, p: DOMRect): Pos
   };
   return formula[position] || { left: 0, top: 0 };
 }
+
 // 根据视窗与相对容器，返回popup的位置范围
 function getWrapperViewEdge(pSize: ElementSize, wrapperRect?: DomContentRect) {
   const viewport = {
@@ -106,6 +110,7 @@ function getWrapperViewEdge(pSize: ElementSize, wrapperRect?: DomContentRect) {
     bottom: Math.min(viewport.bottom, wrapperRect.bottom) - pSize.height,
   };
 }
+
 // 根据视窗与相对容器，返回popup的位置范围
 function getPopupEdge(pSize: ElementSize, targetRect: DOMRect) {
   const { left, right, top, bottom } = targetRect;
@@ -135,6 +140,7 @@ function getPopupWrapOffset(pos: Pos, wrapperEl: HTMLElement | null, wrapperCont
     top: pos.top + cs.scrollTop
   };
 }
+
 // 根据position获取方向
 function getDirection(position: PopupPosition): Direction {
   switch (position) {
@@ -156,6 +162,7 @@ function getDirection(position: PopupPosition): Direction {
       return 'right';
   }
 }
+
 // 调整position
 function adjustPosition(position: PopupPosition, direction: Direction) {
   const fixFn = {
@@ -204,11 +211,11 @@ function adjustPosition(position: PopupPosition, direction: Direction) {
   const fn = fixFn[direction];
   return fn ? fn(position) : position;
 }
+
 // 根据popup的极值调整
 function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSize, pRect: DOMRect, tRect: DOMRect, wRect?: DomContentRect) {
   const { top, left } = pPosition;
   const edge = getWrapperViewEdge(pSize, wRect);
-  console.log('1', pSize, edge, pPosition);
 
   let fixedPosition = position;
   let style = pPosition;
@@ -252,7 +259,6 @@ function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSiz
       style.top = edge.bottom < popEdge.top ? edge.bottom : popEdge.top;
     }
   }
-  console.log('2', popEdge, fixedPosition);
 
   return {
     position: fixedPosition,
@@ -309,3 +315,81 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, cont
   };
 };
 
+
+
+// 监听元素的触发事件
+export function bindTrigger(
+  el: HTMLElement | null,
+  triggers: PopupTrigger[],
+  {
+    updateFn,
+    hoverDelay = 100
+  }: {
+    updateFn: (isVisible: boolean, delay?: number) => void,
+    hoverDelay?: number
+  }
+) {
+  if (!el) {
+    return [];
+  }
+
+  const listeners: Array<() => void> = [];
+
+  const showFn = () => {
+    updateFn(true);
+  };
+  const hideFn = () => {
+    updateFn(false);
+  };
+
+  const enterFn = () => {
+    updateFn(true, hoverDelay);
+  };
+  const leavefn = () => {
+    updateFn(false, hoverDelay);
+  };
+
+  triggers.forEach((tr: PopupTrigger) => {
+    if (tr === PopupTrigger.HOVER) {
+      el?.addEventListener('mouseover', enterFn);
+      el?.addEventListener('mouseleave', leavefn);
+      const removeFn = () => {
+        el?.removeEventListener('mouseover', enterFn);
+        el?.removeEventListener('mouseleave', leavefn);
+      };
+      listeners.push(removeFn);
+    } else if (tr === PopupTrigger.FOUCS) {
+      el?.addEventListener('focusin', showFn);
+      el?.addEventListener('focusout', hideFn);
+      const removeFn = () => {
+        el?.removeEventListener('focusin', showFn);
+        el?.removeEventListener('focusout', hideFn);
+      };
+      listeners.push(removeFn);
+    } else if (tr === PopupTrigger.CLICK) {
+      el?.addEventListener('click', showFn);
+
+      const removeFn = listenOutClick(el, hideFn);
+
+      listeners.push(() => {
+        el?.removeEventListener('click', showFn);
+      });
+      listeners.push(removeFn);
+    } else if (tr === PopupTrigger.CONTEXT_MENU) {
+      const fn = (e: Event) => {
+        e.preventDefault();
+        showFn();
+      };
+      el?.addEventListener('contextmenu', fn);
+
+      const removeFn = listenOutClick(el, hideFn);
+
+      listeners.push(() => {
+        el?.removeEventListener('contextmenu', fn);
+      });
+      listeners.push(removeFn);
+    }
+  });
+
+  return listeners;
+};
\ No newline at end of file
-- 
Gitee


From 62959d9321b94148ba89d12fec47bcf6e9b8e5c1 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 27 Dec 2022 18:32:02 +0800
Subject: [PATCH 08/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BF=9B=E5=85=A5?=
 =?UTF-8?q?=E9=80=80=E5=87=BA=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           | 36 ++++++++++++-------
 .../src/components/popup/style/index.scss     | 18 ++++++++++
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 5d86d5aa..48233624 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -23,7 +23,7 @@ const props = defineProps({
   visible: {
     type: Boolean,
   },
-  container: {
+  wrapper: {
     type: [String, Object] as PropType<string | HTMLElement>,
     default: document.body,
   },
@@ -37,24 +37,25 @@ const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
 
 const visible = ref(false);
 let targetEl: HTMLElement | null = null;
-let containerEl: Ref<HTMLElement | null> = ref(null);
+let wrapperEl: Ref<HTMLElement | null> = ref(null);
 const popWrap = ref<HTMLElement | null>(null);
 const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({ left: `${0}px`, top: `${0}px` });
 const popPosition = ref(props.position);
 // 是否在可视区域外
 const isOutside = ref(false);
+const unmount = ref(true);
 
 // 监听dom尺寸变化
 const { createResizeObserver, destoryResizeObserver } = useResizeObserver();
 
 // 处理popup位置
 const updatePopupStyle = () => {
-  if (!targetEl || !popWrap.value || !containerEl.value) {
+  if (!targetEl || !popWrap.value || !wrapperEl.value) {
     return;
   }
   console.log('update style', popWrap.value);
 
-  const { style, position, isOutside: out } = calcPopupStyle(popWrap.value, targetEl, containerEl.value, props.position);
+  const { style, position, isOutside: out } = calcPopupStyle(popWrap.value, targetEl, wrapperEl.value, props.position);
   isOutside.value = out;
 
   if (style && !out) {
@@ -102,6 +103,9 @@ const updateVisible = (isVisible: boolean, delay?: number) => {
     visible.value = isVisible;
     isOutside.value = false;
     emits('update:visible', isVisible);
+    if (isVisible) {
+      unmount.value = false;
+    }
   };
 
   if (delay) {
@@ -142,16 +146,22 @@ const onResize = () => {
   }
 };
 
+const handleTransitionEnd = () => {
+  if (!visible.value) {
+    unmount.value = true;
+  }
+};
+
 onMounted(() => {
-  // 在mounted事件后再显示，避免找不到container
+  // 在mounted事件后再显示，避免找不到wrapper
   visible.value = props.visible;
 
   // 触发元素为dom或者选择器，处理事件触发
   nextTick(() => {
-    if (typeof props.container === 'string') {
-      containerEl.value = document.querySelector(props.container);
+    if (typeof props.wrapper === 'string') {
+      wrapperEl.value = document.querySelector(props.wrapper);
     } else {
-      containerEl.value = props.container;
+      wrapperEl.value = props.wrapper;
     }
     // 初始为true时，更新样式
     if (visible.value) {
@@ -177,12 +187,14 @@ onUnmounted(() => {
 });
 </script>
 <template>
-  <teleport v-if="visible" :to="props.container">
+  <teleport v-if="!unmount || visible" :to="props.wrapper">
     <ResizeObserver @resize="onResize">
       <div v-show="!isOutside" ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs">
-        <div class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
-          <slot></slot>
-        </div>
+        <Transition name="zoom" :appear="true" @after-leave="handleTransitionEnd">
+          <div v-if="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
+            <slot></slot>
+          </div>
+        </Transition>
       </div>
     </ResizeObserver>
   </teleport>
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index c94c3c3c..865f139c 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -59,3 +59,21 @@
 .o-popup-pos-rb {
   margin-left: var(--popup-gap);
 }
+
+.zoom-enter-active {
+  animation: scale-in 0.3s;
+}
+.zoom-leave-active {
+  animation: scale-in 0.2s reverse;
+}
+
+@keyframes scale-in {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
-- 
Gitee


From 6d4521282df181a910bc4845dc47ebeef269f02d Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 28 Dec 2022 14:22:41 +0800
Subject: [PATCH 09/28] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/popup/OPopup.vue |  2 +-
 .../src/components/popup/style/index.scss      | 10 +++++-----
 .../src/components/style/animation.scss        | 18 ++++++++++++++++++
 .../opendesign/src/components/style/index.scss |  4 ++++
 .../opendesign/src/components/style/index.ts   |  1 -
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 48233624..8f8bac9b 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -190,7 +190,7 @@ onUnmounted(() => {
   <teleport v-if="!unmount || visible" :to="props.wrapper">
     <ResizeObserver @resize="onResize">
       <div v-show="!isOutside" ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs">
-        <Transition name="zoom" :appear="true" @after-leave="handleTransitionEnd">
+        <Transition name="popup-in-out" :appear="true" @after-leave="handleTransitionEnd">
           <div v-if="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
             <slot></slot>
           </div>
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index 865f139c..d8cddc75 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -60,14 +60,14 @@
   margin-left: var(--popup-gap);
 }
 
-.zoom-enter-active {
-  animation: scale-in 0.3s;
+.popup-in-out-enter-active {
+  animation: popup-scale-in 0.3s;
 }
-.zoom-leave-active {
-  animation: scale-in 0.2s reverse;
+.popup-in-out-leave-active {
+  animation: popup-scale-in 0.2s reverse;
 }
 
-@keyframes scale-in {
+@keyframes popup-scale-in {
   0% {
     transform: scale(0.9);
     opacity: 0;
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index fd25de4c..e3987f3c 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -9,3 +9,21 @@ $ani-prefix: 'o-ani';
     transform: rotate(360deg);
   }
 }
+
+@keyframes o-zoom-fade-in {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.o-zoom-fade-enter-active {
+  animation: o-zoom-fade-in var(--o-transition-duration-3);
+}
+.o-zoom-fade-leave-active {
+  animation: o-zoom-fade-in var(--o-transition-duration-2) reverse;
+}
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 46607785..2e799670 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -1,3 +1,5 @@
+@import './animation.scss';
+
 [class^='o-'],
 [class^='o-'] * {
   box-sizing: border-box;
@@ -7,6 +9,8 @@
   --o-size-l: 40px;
   --o-size-m: 32px;
   --o-size-s: 24px;
+  --o-transition-duration-2: 0.2s;
+  --o-transition-duration-3: 0.3s;
 }
 
 // icons
diff --git a/packages/opendesign/src/components/style/index.ts b/packages/opendesign/src/components/style/index.ts
index 84b269b2..67aac616 100644
--- a/packages/opendesign/src/components/style/index.ts
+++ b/packages/opendesign/src/components/style/index.ts
@@ -1,2 +1 @@
-import './animation.scss';
 import './index.scss';
-- 
Gitee


From ca796aba8ba3b2b0afd89d41f4380db9e668882d Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 28 Dec 2022 17:58:04 +0800
Subject: [PATCH 10/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0scroll=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/package.json              |  2 +
 .../src/components/popup/OPopup.vue           | 37 +++++++++++++++++--
 .../popup/__demo__/PopupContainer.vue         | 18 ++++-----
 .../opendesign/src/components/popup/popup.ts  | 32 ++++++++--------
 .../src/components/popup/style/index.scss     | 18 ---------
 packages/portal/src/pages/ThePopup.vue        |  4 +-
 pnpm-lock.yaml                                | 18 +++++++++
 7 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 4e19c363..e9d65437 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -26,12 +26,14 @@
   },
   "devDependencies": {
     "@opensig/opensig-scripts": "workspace:^0.0.1",
+    "@types/lodash-es": "^4.17.6",
     "typescript": "^4.6.4",
     "vue": "^3.2.41",
     "vue-tsc": "^1.0.13"
   },
   "dependencies": {
     "@vue/shared": "^3.2.45",
+    "lodash-es": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1"
   }
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 8f8bac9b..40923dad 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance } from 'vue';
 import { PopupPosition, PopupTrigger } from './types';
-import { isElement } from '../_shared/dom';
+import { isElement, getScrollParents } from '../_shared/dom';
+import { throttleRAF } from '../_shared/utils';
 import { calcPopupStyle, bindTrigger } from './popup';
 import { useResizeObserver } from '../hooks/use-resize-observer';
 import { ResizeObserver } from '../resize-observer';
@@ -53,9 +54,9 @@ const updatePopupStyle = () => {
   if (!targetEl || !popWrap.value || !wrapperEl.value) {
     return;
   }
-  console.log('update style', popWrap.value);
+  console.log('update style');
 
-  const { style, position, isOutside: out } = calcPopupStyle(popWrap.value, targetEl, wrapperEl.value, props.position);
+  const { style, position, isOutside: out } = calcPopupStyle(popWrap.value, targetEl, props.position);
   isOutside.value = out;
 
   if (style && !out) {
@@ -152,6 +153,34 @@ const handleTransitionEnd = () => {
   }
 };
 
+const scrollListener = throttleRAF(() => {
+  if (visible.value) {
+    updatePopupStyle();
+  }
+});
+
+const listenScroll = (el: HTMLElement) => {
+  el.addEventListener('scroll', scrollListener, { passive: true });
+  return () => {
+    el.removeEventListener('scroll', scrollListener);
+  };
+};
+
+watch(popWrap, (popEl) => {
+  let handles: Array<() => void> = [];
+  if (popEl) {
+    if (targetEl) {
+      const scrollers = getScrollParents(targetEl);
+      console.log('scrollers', scrollers);
+      handles = scrollers.map((el) => {
+        return listenScroll(el);
+      });
+    }
+  } else {
+    handles.forEach((hl) => hl());
+  }
+});
+
 onMounted(() => {
   // 在mounted事件后再显示，避免找不到wrapper
   visible.value = props.visible;
@@ -190,7 +219,7 @@ onUnmounted(() => {
   <teleport v-if="!unmount || visible" :to="props.wrapper">
     <ResizeObserver @resize="onResize">
       <div v-show="!isOutside" ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs">
-        <Transition name="popup-in-out" :appear="true" @after-leave="handleTransitionEnd">
+        <Transition name="o-zoom-fade" :appear="true" @after-leave="handleTransitionEnd">
           <div v-if="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
             <slot></slot>
           </div>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index acc4e4fc..ae181345 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -30,39 +30,39 @@ const visible = ref(true);
       <OButton ref="btn8" class="btn8">BL btn8 </OButton>
       <OButton ref="btn9" class="btn9">TL btn9 </OButton>
 
-      <OPopup :position="PopupPosition.TL" :target="btn1" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.TL" :target="btn1" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.TR" :target="btn2" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.TR" :target="btn2" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn3" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn3" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.LT" :target="btn4" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.LT" :target="btn4" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn5" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.TL" :target="btn5" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn6" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.TL" :target="btn6" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.LEFT" :target="btn7" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.LEFT" :target="btn7" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.BL" :target="btn8" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.BL" :target="btn8" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div class="tip">{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn9" container="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.TL" :target="btn9" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index b1bd251a..818b295c 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -1,4 +1,4 @@
-import { getElementBorder, getElementSize, getScroll } from '../_shared/dom';
+import { getElementBorder, getElementSize, getOffsetElement, getScroll } from '../_shared/dom';
 import type { Direction } from '../_shared/dom';
 import { PopupPosition, FullPosition, PopupTrigger } from './types';
 import { listenOutClick } from '../directves';
@@ -95,9 +95,9 @@ function getPopupViewOffset(position: FullPosition, t: DOMRect, p: DOMRect): Pos
 function getWrapperViewEdge(pSize: ElementSize, wrapperRect?: DomContentRect) {
   const viewport = {
     left: 0,
-    right: window.innerWidth,
+    right: window.innerWidth - pSize.width,
     top: 0,
-    bottom: window.innerHeight
+    bottom: window.innerHeight - pSize.height
   };
 
   if (!wrapperRect) {
@@ -106,8 +106,8 @@ function getWrapperViewEdge(pSize: ElementSize, wrapperRect?: DomContentRect) {
   return {
     left: Math.max(viewport.left, wrapperRect.left),
     top: Math.max(viewport.top, wrapperRect.top),
-    right: Math.min(viewport.right, wrapperRect.right) - pSize.width,
-    bottom: Math.min(viewport.bottom, wrapperRect.bottom) - pSize.height,
+    right: Math.min(viewport.right, wrapperRect.right - pSize.width),
+    bottom: Math.min(viewport.bottom, wrapperRect.bottom - pSize.height),
   };
 }
 
@@ -132,7 +132,7 @@ function getPopupWrapOffset(pos: Pos, wrapperEl: HTMLElement | null, wrapperCont
   if (wrapperContentRect) {
     return {
       left: pos.left + cs.scrollLeft - wrapperContentRect.left,
-      top: pos.top - wrapperContentRect.top + cs.scrollTop
+      top: pos.top + cs.scrollTop - wrapperContentRect.top
     };
   }
   return {
@@ -267,7 +267,7 @@ function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSiz
 }
 
 // 处理popup位置
-export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, container: HTMLElement, position: PopupPosition,
+export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, position: PopupPosition,
   { adaptive = true }: { adaptive?: boolean } = {}) {
 
   const tRect = targetEl.getBoundingClientRect();
@@ -286,16 +286,18 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, cont
   // 根据position计算popup相对视窗的位置
   let style = getPopupViewOffset(position, tRect, pRect);
 
-  const wrapperEl = popupEl.offsetParent as HTMLElement | null;
-  const wrapperRect = wrapperEl?.getBoundingClientRect();
-  let wrapperContentRect = wrapperEl ? getWrapperContentRect(wrapperEl, wrapperRect) : undefined;
+  const wrapperEl = getOffsetElement(popupEl) as HTMLElement;
+  if (!wrapperEl) {
+    return {
+      isOutside: true
+    };
+  }
+  const wrapperRect = wrapperEl.getBoundingClientRect();
+  let wrapperContentRect = undefined;
 
   // wrapper为body时，如果body有偏移，但position值为static，不需要计算wrapper的content rect。
-  if (wrapperEl?.nodeName === 'BODY' && wrapperContentRect && (wrapperContentRect?.top > 0 || wrapperContentRect?.left > 0)) {
-    const stylePosition = window.getComputedStyle(wrapperEl).getPropertyValue('position');
-    if (stylePosition === 'static') {
-      wrapperContentRect = undefined;
-    }
+  if (wrapperEl.nodeName !== 'HTML') {
+    wrapperContentRect = getWrapperContentRect(wrapperEl, wrapperRect);
   }
 
   let fixedPosition = position;
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index d8cddc75..c94c3c3c 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -59,21 +59,3 @@
 .o-popup-pos-rb {
   margin-left: var(--popup-gap);
 }
-
-.popup-in-out-enter-active {
-  animation: popup-scale-in 0.3s;
-}
-.popup-in-out-leave-active {
-  animation: popup-scale-in 0.2s reverse;
-}
-
-@keyframes popup-scale-in {
-  0% {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
diff --git a/packages/portal/src/pages/ThePopup.vue b/packages/portal/src/pages/ThePopup.vue
index 13881187..6ed5fe6a 100644
--- a/packages/portal/src/pages/ThePopup.vue
+++ b/packages/portal/src/pages/ThePopup.vue
@@ -8,8 +8,8 @@ import PopupContainer from '@demo/popup/__demo__/PopupContainer.vue';
 <template>
   <div class="page-demo">
     <PopupContainer />
-    <!-- <PopupPosition />
-    <PopupVisible /> -->
+    <PopupPosition />
+    <!-- <PopupVisible /> -->
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 33d58145..026e16d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,16 +21,20 @@ importers:
   packages/opendesign:
     specifiers:
       '@opensig/opensig-scripts': workspace:^0.0.1
+      '@types/lodash-es': ^4.17.6
       '@vue/shared': ^3.2.45
+      lodash-es: ^4.17.21
       resize-observer-polyfill: ^1.5.1
       typescript: ^4.6.4
       vue: ^3.2.41
       vue-tsc: ^1.0.13
     dependencies:
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
+      lodash-es: 4.17.21
       resize-observer-polyfill: 1.5.1
     devDependencies:
       '@opensig/opensig-scripts': link:../scripts
+      '@types/lodash-es': 4.17.6
       typescript: 4.9.3
       vue: 3.2.45
       vue-tsc: 1.0.13_typescript@4.9.3
@@ -368,6 +372,16 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: true
+
+  /@types/lodash/4.14.191:
+    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
+    dev: true
+
   /@types/minimatch/5.1.2:
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
     dev: true
@@ -1601,6 +1615,10 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.get/4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: false
-- 
Gitee


From 032c67374e6fceea531432a906406953989a9280 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 30 Dec 2022 14:47:19 +0800
Subject: [PATCH 11/28] =?UTF-8?q?=E4=BC=98=E5=8C=96resize=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/_shared/dom.ts  |  26 +++-
 .../src/components/_shared/utils.ts           |  47 +++++++
 .../src/components/directves/on-resize.ts     |  24 ++++
 .../opendesign/src/components/hooks/index.ts  |   4 +-
 .../components/hooks/use-element-resize.ts    |  24 ++++
 .../components/hooks/use-resize-observer.ts   | 119 ++++++++++++++----
 .../__demo__/ResizeObserver.vue               |  14 ++-
 .../resize-observer/resize-observer.ts        |  42 ++-----
 8 files changed, 239 insertions(+), 61 deletions(-)
 create mode 100644 packages/opendesign/src/components/directves/on-resize.ts
 create mode 100644 packages/opendesign/src/components/hooks/use-element-resize.ts

diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts
index e6748c3e..45ea5632 100644
--- a/packages/opendesign/src/components/_shared/dom.ts
+++ b/packages/opendesign/src/components/_shared/dom.ts
@@ -9,7 +9,18 @@ export function isElement(el: any) {
 export function isDocumentElement(el: HTMLElement | Window) {
   return el === window || ['HTML'].includes((el as HTMLElement).tagName);
 }
-
+// 获取真实相对父元素  当body没有设置position时，返回html
+export function getOffsetElement(el: HTMLElement) {
+  let offsetEl = el.offsetParent;
+  if (offsetEl && offsetEl.tagName === 'BODY') {
+    const stylePosition = window.getComputedStyle(document.body).getPropertyValue('position');
+    if (stylePosition === 'static') {
+      return document.documentElement;
+    }
+  }
+  return offsetEl;
+}
+// 获取元素scroll值
 export function getScroll(el: HTMLElement | Window = window) {
   if (!el) {
     return {
@@ -23,6 +34,19 @@ export function getScroll(el: HTMLElement | Window = window) {
     scrollTop: isroot ? window.scrollY : (el as HTMLElement).scrollTop,
   };
 }
+// 获取元素的可滚动的父元素
+export function getScrollParents(el: HTMLElement) {
+  const parents: Array<HTMLElement> = [];
+  let ele: HTMLElement | null = el;
+  while (ele && ele !== document.documentElement) {
+    const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = ele;
+    if (offsetHeight < scrollHeight || offsetWidth < scrollWidth) {
+      parents.push(ele);
+    }
+    ele = ele.parentElement;
+  }
+  return parents;
+}
 export function getRelativeBounding(e: DOMRect, c: DOMRect) {
   return {
     top: e.top,
diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index bd67757e..07591204 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -1,3 +1,50 @@
+import { throttle as _throttle, debounce as _debounce } from 'lodash-es';
+import type { ThrottleSettings, DebounceSettings } from 'lodash-es';
+
 export function isFunction(fn: any) {
   return typeof fn === 'function';
+}
+// 防抖
+export function debounce<T extends (...args: any) => any>(fn: T, wait?: number, ctx?: any | null, opts?: ThrottleSettings) {
+  return _debounce.apply(ctx, [fn, wait, opts]);
+}
+// 节流
+export function throttle<T extends (...args: any) => any>(fn: T, wait?: number, ctx?: any | null, opts?: DebounceSettings) {
+  return _throttle.apply(ctx, [fn, wait, opts]);
+}
+// 防抖 时间为一个一帧
+export function debounceRAF<T extends (...args: any) => any>(fn: T) {
+  let handle = 0;
+  const rlt = (...args: any[]) => {
+    if (handle) {
+      cancelAnimationFrame(handle);
+    }
+    handle = requestAnimationFrame(() => {
+      fn(...args);
+      handle = 0;
+    });
+  };
+  rlt.cancel = () => {
+    cancelAnimationFrame(handle);
+    handle = 0;
+  };
+  return rlt;
+}
+// 节流 时间为一个一帧
+export function throttleRAF<T extends (...args: any) => any>(fn: T) {
+  let handle = 0;
+  const rlt = (...args: any[]) => {
+    if (handle) {
+      return;
+    }
+    handle = requestAnimationFrame(() => {
+      fn(...args);
+      handle = 0;
+    });
+  };
+  rlt.cancel = () => {
+    cancelAnimationFrame(handle);
+    handle = 0;
+  };
+  return rlt;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/directves/on-resize.ts b/packages/opendesign/src/components/directves/on-resize.ts
new file mode 100644
index 00000000..362472a5
--- /dev/null
+++ b/packages/opendesign/src/components/directves/on-resize.ts
@@ -0,0 +1,24 @@
+import { DirectiveBinding, ObjectDirective } from 'vue';
+import { useResizeObserver } from '../hooks';
+import { isFunction } from '../_shared/utils';
+
+const ob = useResizeObserver();
+let onResizeFn: (entry: ResizeObserverEntry) => void = () => null;
+
+const vOnResize: ObjectDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    if (isFunction(binding.value)) {
+      onResizeFn = binding.value;
+      ob.addListener(el, onResizeFn);
+    }
+  },
+  unmounted(el: HTMLElement) {
+    if (onResizeFn) {
+      ob.removeListener(el, onResizeFn);
+    }
+  },
+};
+
+export {
+  vOnResize
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/index.ts b/packages/opendesign/src/components/hooks/index.ts
index 31fd89e8..0f87bc79 100644
--- a/packages/opendesign/src/components/hooks/index.ts
+++ b/packages/opendesign/src/components/hooks/index.ts
@@ -1 +1,3 @@
-export * from './use-resize-observer';
\ No newline at end of file
+export * from './use-resize-observer';
+export * from './use-element';
+export * from './use-element-resize';
diff --git a/packages/opendesign/src/components/hooks/use-element-resize.ts b/packages/opendesign/src/components/hooks/use-element-resize.ts
new file mode 100644
index 00000000..5da850c0
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-element-resize.ts
@@ -0,0 +1,24 @@
+import { ObjectDirective } from 'vue';
+import { useResizeObserver } from './use-resize-observer';
+import type { ResizeListenerT } from './use-resize-observer';
+import { isFunction } from '../_shared/utils';
+
+const ob = useResizeObserver();
+export function useReiszeObserverDirective(onResize: ResizeListenerT): { vResizeObserver: ObjectDirective } {
+  return {
+    vResizeObserver: {
+      mounted(el: HTMLElement) {
+        console.log('mounted', el);
+
+        if (isFunction(onResize)) {
+          ob.addListener(el, onResize);
+        }
+      },
+      unmounted(el: HTMLElement) {
+        if (onResize) {
+          ob.removeListener(el, onResize);
+        }
+      },
+    }
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index 7e5c6b2c..770929eb 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -1,34 +1,109 @@
 import ResizeObserver from 'resize-observer-polyfill';
 import { isFunction } from '../_shared/utils';
 
-export function useResizeObserver() {
-  let ro: ResizeObserver | null = null;
+export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void;
+/**
+ * 监听元素尺寸变化，
+ * ele: 监听元素；
+ * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
+ */
+export function useResizeObserver(
+  element?: HTMLElement,
+  onResize?: (entry: ResizeObserverEntry, isFirst: boolean) => void,
+) {
+  let el = element;
+  let cb = onResize;
+
+  /**
+   * 监听池
+   * isFirst: 监听的第一次回调
+   */
+  const observerPool = new Map<HTMLElement, {
+    element: HTMLElement,
+    isFirst: boolean, // 初次监听时会触发一次回调
+    callbacks: Array<(entry: ResizeObserverEntry, isFirst: boolean) => void>
+  } | null>();
 
   // 创建监听实例
-  const createResizeObserver = (el: HTMLElement | null, onResize: (en: ResizeObserverEntry) => void) => {
-    if (!el) {
-      return null;
-    }
+  const observerInstance = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+    entries.forEach((entry) => {
+      console.log('rs cb:', entry.target);
 
-    ro = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-      if (isFunction(onResize)) {
-        onResize(entries[0]);
+      const ele = entry.target as HTMLElement;
+      const ins = observerPool.get(ele);
+      if (!ins) {
+        return;
       }
-    });
-    ro.observe(el);
-    return ro;
-  };
 
-  // 销毁监听
-  const destoryResizeObserver = () => {
-    if (ro) {
-      ro.disconnect();
-      ro = null;
-    }
-  };
+      ins?.callbacks?.forEach(fn => fn(entry, ins.isFirst));
+
+      if (ins.isFirst) {
+        ins.isFirst = false;
+      }
+    });
+  });
 
   return {
-    createResizeObserver,
-    destoryResizeObserver
+    /**
+     * 监听实例
+     */
+    observer: observerInstance,
+    /**
+     * 创建监听实例
+     * ele: 监听元素
+     * listener: resize回调, 移除监听时需要指定该监听函数
+     * isFirst: 是否为初次监听时的回调
+     */
+    addListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
+      el = ele || element;
+      cb = listener || onResize;
+
+      if (!el || !cb || !isFunction(cb)) {
+        return null;
+      }
+
+      // 同一元素，只创建一次ResizeObserver，通过数组存储回调
+      const val = observerPool.get(el);
+      if (val) {
+        val.callbacks.push(cb);
+      } else {
+        observerInstance.observe(el);
+
+        observerPool.set(el, {
+          element: el,
+          callbacks: [cb],
+          isFirst: true
+        });
+      }
+
+      return observerInstance;
+    },
+    /**
+     * 移除监听
+     * listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调
+     */
+    removeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
+      let fn = listener || cb;
+      el = ele || element;
+
+      if (!el || !fn) {
+        return;
+      }
+
+      const val = observerPool.get(el);
+
+      if (val) {
+        const idx = val.callbacks.indexOf(fn);
+        val.callbacks.splice(idx, 1);
+        if (val.callbacks.length === 0) {
+          // 当el无监听时，销毁resizeObserver
+          observerInstance.unobserve(el);
+          observerPool.delete(el);
+        }
+        if (observerPool.size === 0) {
+          observerInstance.disconnect();
+        }
+      }
+    }
   };
 };
\ No newline at end of file
diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
index f88fa01f..00b4c02c 100644
--- a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
+++ b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
@@ -5,10 +5,12 @@ import { OButton } from '../../button';
 import '../../button/style';
 
 const content = ref('content text: ');
+const listener = ref(true);
 let cnt = 1;
 const changeFn = () => {
   cnt++;
   content.value += `-${cnt} `;
+  listener.value = cnt !== 3;
 };
 
 const rlt = reactive({
@@ -24,7 +26,9 @@ const rlt = reactive({
   visible2: true,
 });
 
-const onResize = (entry: ResizeObserverEntry, size: 'size1' | 'size2') => {
+const onResize = (entry: ResizeObserverEntry, isfirst: boolean, size: 'size1' | 'size2') => {
+  console.log('onResize', isfirst, entry.target);
+
   rlt[size].width = entry.contentRect.width;
   rlt[size].height = entry.contentRect.height;
 };
@@ -36,22 +40,22 @@ const toggle = (key: 'visible1' | 'visible2') => {
 <template>
   <h4>resize observer</h4>
 
-  <ResizeObserver @resize="(en) => onResize(en, 'size1')">
+  <ResizeObserver @resize="(en, isfirst) => onResize(en, isfirst, 'size1')">
     <div v-if="rlt.visible1" class="content" :name="content" @click="changeFn">
       {{ content }}
     </div>
-    <div v-else class="content" @click="changeFn">changed: {{ content }}</div>
+    <p v-else class="content" @click="changeFn">changed: {{ content }}</p>
     <div @click="toggle('visible1')">toggle</div>
   </ResizeObserver>
   <div class="tip">width: {{ rlt.size1.width }}; height: {{ rlt.size1.height }}</div>
 
-  <ResizeObserver @resize="(en) => onResize(en, 'size2')">
+  <!-- <ResizeObserver @resize="(en,isfirst) => onResize(en, isfirst,'size2')">
     <OButton v-if="rlt.visible2" @click="changeFn">
       {{ content }}
     </OButton>
     <div @click="toggle('visible2')">toggle</div>
   </ResizeObserver>
-  <div class="tip">width: {{ rlt.size2.width }}; height: {{ rlt.size2.height }}</div>
+  <div class="tip">width: {{ rlt.size2.width }}; height: {{ rlt.size2.height }}</div> -->
 </template>
 <style lang="scss" scoped>
 .content {
diff --git a/packages/opendesign/src/components/resize-observer/resize-observer.ts b/packages/opendesign/src/components/resize-observer/resize-observer.ts
index a1aa60dc..e49e341a 100644
--- a/packages/opendesign/src/components/resize-observer/resize-observer.ts
+++ b/packages/opendesign/src/components/resize-observer/resize-observer.ts
@@ -1,44 +1,22 @@
-import { defineComponent, onBeforeUnmount, cloneVNode, withDirectives } from 'vue';
-import { useResizeObserver } from '../hooks/use-resize-observer';
-import { useElementDirective, LifeCycleT } from '../hooks/use-element';
-
+import { defineComponent, cloneVNode, withDirectives } from 'vue';
+import { useReiszeObserverDirective } from '../hooks';
 
+/**
+ * 子元素resize监听
+ * 如果有多个子元素，每个子元素都会被监听到
+ */
 export default defineComponent({
   name: 'ResizeObserver',
   emits: ['resize'],
   setup(props, { emit, slots }) {
-    const { createResizeObserver, destoryResizeObserver } = useResizeObserver();
-
-    let ro: ResizeObserver | null = null;
-
-    const { getElementDirective } = useElementDirective((el: HTMLElement | null, type: LifeCycleT) => {
-      if (type === 'updated') {
-        return;
-      }
-
-      if (ro) {
-        destoryResizeObserver();
-      }
-
-      if (el) {
-        ro = createResizeObserver(el, (entry: ResizeObserverEntry) => {
-          // 触发resize事件
-          emit('resize', entry);
-        });
-      }
-    });
-
-    onBeforeUnmount(() => {
-      // 销毁监听
-      destoryResizeObserver();
+    const { vResizeObserver } = useReiszeObserverDirective((entry: ResizeObserverEntry, isFirst: boolean) => {
+      // 触发resize事件
+      emit('resize', entry, isFirst);
     });
 
     return () => {
       const children = slots.default?.();
-      if (children && children.length > 0) {
-        children[0] = withDirectives(cloneVNode(children[0]), [[getElementDirective]]);
-      }
-      return children;
+      return children?.map((item) => withDirectives(cloneVNode(item), [[vResizeObserver]]));
     };
   },
 });
-- 
Gitee


From c9d25673fbda04c7ddb54477a4a1fb698c38545f Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 30 Dec 2022 15:16:10 +0800
Subject: [PATCH 12/28] rm comments

---
 packages/opendesign/src/components/directves/focus.ts         | 2 --
 .../opendesign/src/components/hooks/use-element-resize.ts     | 2 --
 .../opendesign/src/components/hooks/use-resize-observer.ts    | 3 +--
 .../components/resize-observer/__demo__/ResizeObserver.vue    | 4 ++--
 4 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/opendesign/src/components/directves/focus.ts b/packages/opendesign/src/components/directves/focus.ts
index 2ecc79e4..4e8d9773 100644
--- a/packages/opendesign/src/components/directves/focus.ts
+++ b/packages/opendesign/src/components/directves/focus.ts
@@ -2,8 +2,6 @@ import { ObjectDirective } from 'vue';
 
 const vFocus: ObjectDirective = {
   mounted(el: HTMLElement) {
-    console.log('focus');
-
     el.focus();
   }
 };
diff --git a/packages/opendesign/src/components/hooks/use-element-resize.ts b/packages/opendesign/src/components/hooks/use-element-resize.ts
index 5da850c0..88af54e2 100644
--- a/packages/opendesign/src/components/hooks/use-element-resize.ts
+++ b/packages/opendesign/src/components/hooks/use-element-resize.ts
@@ -8,8 +8,6 @@ export function useReiszeObserverDirective(onResize: ResizeListenerT): { vResize
   return {
     vResizeObserver: {
       mounted(el: HTMLElement) {
-        console.log('mounted', el);
-
         if (isFunction(onResize)) {
           ob.addListener(el, onResize);
         }
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index 770929eb..26de0a49 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -27,8 +27,6 @@ export function useResizeObserver(
   // 创建监听实例
   const observerInstance = new ResizeObserver((entries: ResizeObserverEntry[]) => {
     entries.forEach((entry) => {
-      console.log('rs cb:', entry.target);
-
       const ele = entry.target as HTMLElement;
       const ins = observerPool.get(ele);
       if (!ins) {
@@ -83,6 +81,7 @@ export function useResizeObserver(
      * listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调
      */
     removeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
+
       let fn = listener || cb;
       el = ele || element;
 
diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
index 00b4c02c..c550dc15 100644
--- a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
+++ b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
@@ -49,13 +49,13 @@ const toggle = (key: 'visible1' | 'visible2') => {
   </ResizeObserver>
   <div class="tip">width: {{ rlt.size1.width }}; height: {{ rlt.size1.height }}</div>
 
-  <!-- <ResizeObserver @resize="(en,isfirst) => onResize(en, isfirst,'size2')">
+  <ResizeObserver @resize="(en, isfirst) => onResize(en, isfirst, 'size2')">
     <OButton v-if="rlt.visible2" @click="changeFn">
       {{ content }}
     </OButton>
     <div @click="toggle('visible2')">toggle</div>
   </ResizeObserver>
-  <div class="tip">width: {{ rlt.size2.width }}; height: {{ rlt.size2.height }}</div> -->
+  <div class="tip">width: {{ rlt.size2.width }}; height: {{ rlt.size2.height }}</div>
 </template>
 <style lang="scss" scoped>
 .content {
-- 
Gitee


From 6302659b377f8cc7fb2b2c63914fdb4998ce627e Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 30 Dec 2022 15:17:07 +0800
Subject: [PATCH 13/28] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E5=8F=98=E5=8C=96=E7=9A=84=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           | 45 ++++++++++++++-----
 .../popup/__demo__/PopupContainer.vue         | 16 ++++---
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 40923dad..426d18df 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -5,6 +5,7 @@ import { isElement, getScrollParents } from '../_shared/dom';
 import { throttleRAF } from '../_shared/utils';
 import { calcPopupStyle, bindTrigger } from './popup';
 import { useResizeObserver } from '../hooks/use-resize-observer';
+import type { ResizeObserverInstanceT } from '../hooks/use-resize-observer';
 import { ResizeObserver } from '../resize-observer';
 
 const props = defineProps({
@@ -46,8 +47,7 @@ const popPosition = ref(props.position);
 const isOutside = ref(false);
 const unmount = ref(true);
 
-// 监听dom尺寸变化
-const { createResizeObserver, destoryResizeObserver } = useResizeObserver();
+const resizeObserver = useResizeObserver();
 
 // 处理popup位置
 const updatePopupStyle = () => {
@@ -106,6 +106,9 @@ const updateVisible = (isVisible: boolean, delay?: number) => {
     emits('update:visible', isVisible);
     if (isVisible) {
       unmount.value = false;
+      nextTick(() => {
+        updatePopupStyle();
+      });
     }
   };
 
@@ -141,8 +144,8 @@ watch(
   }
 );
 
-const onResize = () => {
-  if (visible.value) {
+const onResize = (en: ResizeObserverEntry, isFirst: boolean) => {
+  if (visible.value && !isFirst) {
     updatePopupStyle();
   }
 };
@@ -170,14 +173,34 @@ watch(popWrap, (popEl) => {
   let handles: Array<() => void> = [];
   if (popEl) {
     if (targetEl) {
+      // 监听targetEl父组件滚动
       const scrollers = getScrollParents(targetEl);
-      console.log('scrollers', scrollers);
       handles = scrollers.map((el) => {
         return listenScroll(el);
       });
+
+      // 监听targetEL尺寸变化
+      resizeObserver.addListener(targetEl, onResize);
+    }
+    if (!wrapperEl.value) {
+      if (typeof props.wrapper === 'string') {
+        wrapperEl.value = document.querySelector(props.wrapper);
+      } else {
+        wrapperEl.value = props.wrapper;
+      }
+    }
+    if (wrapperEl.value) {
+      // 监听warpper尺寸变化
+      resizeObserver.addListener(wrapperEl.value, onResize);
     }
   } else {
     handles.forEach((hl) => hl());
+    if (wrapperEl.value) {
+      resizeObserver.removeListener(wrapperEl.value, onResize);
+    }
+    if (targetEl) {
+      resizeObserver.removeListener(targetEl, onResize);
+    }
   }
 });
 
@@ -187,11 +210,6 @@ onMounted(() => {
 
   // 触发元素为dom或者选择器，处理事件触发
   nextTick(() => {
-    if (typeof props.wrapper === 'string') {
-      wrapperEl.value = document.querySelector(props.wrapper);
-    } else {
-      wrapperEl.value = props.wrapper;
-    }
     // 初始为true时，更新样式
     if (visible.value) {
       updatePopupStyle();
@@ -212,7 +230,12 @@ onUnmounted(() => {
     fn();
   });
   // 销毁popup 的 resize监听
-  destoryResizeObserver();
+  if (wrapperEl.value) {
+    resizeObserver.removeListener(wrapperEl.value, onResize);
+  }
+  if (targetEl) {
+    resizeObserver.removeListener(targetEl, onResize);
+  }
 });
 </script>
 <template>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index ae181345..534d305d 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -15,16 +15,22 @@ const btn7 = ref(null);
 const btn8 = ref(null);
 const btn9 = ref(null);
 const visible = ref(true);
+const text = ref('text');
+const width = ref('50vw');
+setTimeout(() => {
+  text.value += '--|';
+  width.value = '40vw';
+}, 2000);
 </script>
 <template>
   <h4>popup container</h4>
-  <div id="wrap">
+  <div id="wrap" :style="{ width: width }">
     <div class="content">
       <OButton ref="btn1" class="btn1">TL btn1 </OButton>
       <OButton ref="btn2" class="btn2">TR btn2 </OButton>
       <OButton ref="btn3" class="btn3">TL btn3 </OButton>
       <OButton ref="btn4" class="btn4">LT btn4 </OButton>
-      <OButton ref="btn5" class="btn5">TL btn5 </OButton>
+      <OButton ref="btn5" class="btn5">TL btn5 {{ text }}</OButton>
       <OButton ref="btn6" class="btn6">TL btn6 </OButton>
       <OButton ref="btn7" class="btn7">LEFT btn7 </OButton>
       <OButton ref="btn8" class="btn8">BL btn8 </OButton>
@@ -38,7 +44,7 @@ const visible = ref(true);
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn3" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.TL" :target="btn3" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
@@ -46,7 +52,7 @@ const visible = ref(true);
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn5" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup v-model:visible="visible" :position="PopupPosition.TR" :target="btn5" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
@@ -109,7 +115,7 @@ const visible = ref(true);
   top: 11vh;
 }
 .btn5 {
-  left: 20vw;
+  right: 60%;
   top: 15vh;
 }
 .btn6 {
-- 
Gitee


From 9f2c5ecf9955d91d16e38686bb1fb8d2a4074582 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 30 Dec 2022 20:19:59 +0800
Subject: [PATCH 14/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BF=9B=E5=85=A5?=
 =?UTF-8?q?=E8=A7=86=E7=AA=97=E7=9A=84hooks=20=E6=8C=87=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/package.json              |   1 +
 .../components/directves/on-intersection.ts   |  24 +++++
 .../src/components/directves/on-resize.ts     |  12 +--
 .../opendesign/src/components/hooks/index.ts  |   2 +
 .../hooks/use-element-intersection.ts         |  25 +++++
 .../hooks/use-intersection-observer.ts        | 102 ++++++++++++++++++
 .../components/hooks/use-resize-observer.ts   |  14 +--
 .../__demo__/IntersectionObserverDemo.vue     |  53 +++++++++
 .../components/intersection-observer/index.ts |   1 +
 .../intersection-observer.ts                  |  25 +++++
 ...izeObserver.vue => ResizeObserverDemo.vue} |   0
 .../opendesign/src/components/vite-env.d.ts   |   4 +
 .../src/pages/TheIntersectionObserver.vue     |   9 ++
 .../portal/src/pages/TheResizeObserver.vue    |   2 +-
 packages/portal/src/router.ts                 |   6 ++
 pnpm-lock.yaml                                |   6 ++
 16 files changed, 272 insertions(+), 14 deletions(-)
 create mode 100644 packages/opendesign/src/components/directves/on-intersection.ts
 create mode 100644 packages/opendesign/src/components/hooks/use-element-intersection.ts
 create mode 100644 packages/opendesign/src/components/hooks/use-intersection-observer.ts
 create mode 100644 packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue
 create mode 100644 packages/opendesign/src/components/intersection-observer/index.ts
 create mode 100644 packages/opendesign/src/components/intersection-observer/intersection-observer.ts
 rename packages/opendesign/src/components/resize-observer/__demo__/{ResizeObserver.vue => ResizeObserverDemo.vue} (100%)
 create mode 100644 packages/portal/src/pages/TheIntersectionObserver.vue

diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index e9d65437..24cb1ca2 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@vue/shared": "^3.2.45",
+    "intersection-observer-polyfill": "^0.1.0",
     "lodash-es": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1"
   }
diff --git a/packages/opendesign/src/components/directves/on-intersection.ts b/packages/opendesign/src/components/directves/on-intersection.ts
new file mode 100644
index 00000000..c49a3b4f
--- /dev/null
+++ b/packages/opendesign/src/components/directves/on-intersection.ts
@@ -0,0 +1,24 @@
+import { DirectiveBinding, ObjectDirective } from 'vue';
+import { useIntersectionObserver, IntersectionListenerT } from '../hooks';
+import { isFunction } from '../_shared/utils';
+
+const io = useIntersectionObserver();
+let listener: IntersectionListenerT = () => null;
+
+const vIntersection: ObjectDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    if (isFunction(binding.value)) {
+      listener = binding.value;
+      io.addListener(el, listener);
+    }
+  },
+  unmounted(el: HTMLElement) {
+    if (listener) {
+      io.removeListener(el, listener);
+    }
+  },
+};
+
+export {
+  vIntersection
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/directves/on-resize.ts b/packages/opendesign/src/components/directves/on-resize.ts
index 362472a5..b2f0eb45 100644
--- a/packages/opendesign/src/components/directves/on-resize.ts
+++ b/packages/opendesign/src/components/directves/on-resize.ts
@@ -1,20 +1,20 @@
 import { DirectiveBinding, ObjectDirective } from 'vue';
-import { useResizeObserver } from '../hooks';
+import { useResizeObserver, ResizeListenerT } from '../hooks';
 import { isFunction } from '../_shared/utils';
 
 const ob = useResizeObserver();
-let onResizeFn: (entry: ResizeObserverEntry) => void = () => null;
+let listener: ResizeListenerT = () => null;
 
 const vOnResize: ObjectDirective = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     if (isFunction(binding.value)) {
-      onResizeFn = binding.value;
-      ob.addListener(el, onResizeFn);
+      listener = binding.value;
+      ob.addListener(el, listener);
     }
   },
   unmounted(el: HTMLElement) {
-    if (onResizeFn) {
-      ob.removeListener(el, onResizeFn);
+    if (listener) {
+      ob.removeListener(el, listener);
     }
   },
 };
diff --git a/packages/opendesign/src/components/hooks/index.ts b/packages/opendesign/src/components/hooks/index.ts
index 0f87bc79..27f2a3f5 100644
--- a/packages/opendesign/src/components/hooks/index.ts
+++ b/packages/opendesign/src/components/hooks/index.ts
@@ -1,3 +1,5 @@
 export * from './use-resize-observer';
+export * from './use-intersection-observer';
 export * from './use-element';
 export * from './use-element-resize';
+export * from './use-element-intersection';
diff --git a/packages/opendesign/src/components/hooks/use-element-intersection.ts b/packages/opendesign/src/components/hooks/use-element-intersection.ts
new file mode 100644
index 00000000..1436c162
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-element-intersection.ts
@@ -0,0 +1,25 @@
+import { ObjectDirective } from 'vue';
+import { useIntersectionObserver } from './use-intersection-observer';
+import type { IntersectionListenerT } from './use-intersection-observer';
+import { isFunction } from '../_shared/utils';
+
+const io = useIntersectionObserver();
+export function useIntersectionObserverDirective({ listener, removeOnUnmounted }: {
+  listener: IntersectionListenerT,
+  removeOnUnmounted?: boolean
+}): { vIntersectionObserver: ObjectDirective } {
+  return {
+    vIntersectionObserver: {
+      mounted(el: HTMLElement) {
+        if (isFunction(listener)) {
+          io.addListener(el, listener);
+        }
+      },
+      unmounted(el: HTMLElement) {
+        if (listener && removeOnUnmounted) {
+          io.removeListener(el, listener);
+        }
+      },
+    }
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
new file mode 100644
index 00000000..d2028c63
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
@@ -0,0 +1,102 @@
+import IntersectionObserver from 'intersection-observer-polyfill';
+import { isFunction } from '../_shared/utils';
+
+export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void;
+/**
+ * 监听元素尺寸变化，
+ * ele: 监听元素；
+ * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
+ */
+export function useIntersectionObserver(
+  element?: HTMLElement,
+  listenerFn?: IntersectionListenerT,
+) {
+  let el = element;
+  let cb = listenerFn;
+
+  /**
+   * 监听池
+   * isFirst: 监听的第一次回调
+   */
+  const observerPool = new Map<HTMLElement, {
+    element: HTMLElement,
+    callbacks: Array<IntersectionListenerT>
+  } | null>();
+
+  // 创建监听实例
+  const instance = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      const ele = entry.target as HTMLElement;
+      const ins = observerPool.get(ele);
+
+      if (!ins) {
+        return;
+      }
+
+      ins?.callbacks?.forEach(fn => fn(entry));
+    });
+  });
+
+  return {
+    /**
+     * 监听实例
+     */
+    observer: instance,
+    /**
+     * 创建监听实例
+     * ele: 监听元素
+     * listener: resize回调, 移除监听时需要指定该监听函数
+     * isFirst: 是否为初次监听时的回调
+     */
+    addListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
+      el = ele || element;
+      cb = listener || cb;
+
+      if (!el || !cb || !isFunction(cb)) {
+        return null;
+      }
+
+      // 同一元素，只创建一次ResizeObserver，通过数组存储回调
+      const val = observerPool.get(el);
+      if (val) {
+        val.callbacks.push(cb);
+      } else {
+        instance.observe(el);
+
+        observerPool.set(el, {
+          element: el,
+          callbacks: [cb],
+        });
+      }
+
+      return instance;
+    },
+    /**
+     * 移除监听
+     * listener: 要移除的监听函数，如果不传，则使用初始化时的回调
+     */
+    removeListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
+      let fn = listener || cb;
+      el = ele || element;
+
+      if (!el || !fn) {
+        return;
+      }
+
+      const val = observerPool.get(el);
+
+      if (val) {
+        const idx = val.callbacks.indexOf(fn);
+        val.callbacks.splice(idx, 1);
+        if (val.callbacks.length === 0) {
+          // 当el无监听时，销毁resizeObserver
+          instance.unobserve(el);
+          observerPool.delete(el);
+        }
+        if (observerPool.size === 0) {
+          instance.disconnect();
+        }
+      }
+    }
+  };
+};
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index 26de0a49..a4c1c795 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -9,7 +9,7 @@ export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) =>
  */
 export function useResizeObserver(
   element?: HTMLElement,
-  onResize?: (entry: ResizeObserverEntry, isFirst: boolean) => void,
+  onResize?: ResizeListenerT,
 ) {
   let el = element;
   let cb = onResize;
@@ -25,7 +25,7 @@ export function useResizeObserver(
   } | null>();
 
   // 创建监听实例
-  const observerInstance = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+  const instance = new ResizeObserver((entries: ResizeObserverEntry[]) => {
     entries.forEach((entry) => {
       const ele = entry.target as HTMLElement;
       const ins = observerPool.get(ele);
@@ -45,7 +45,7 @@ export function useResizeObserver(
     /**
      * 监听实例
      */
-    observer: observerInstance,
+    observer: instance,
     /**
      * 创建监听实例
      * ele: 监听元素
@@ -65,7 +65,7 @@ export function useResizeObserver(
       if (val) {
         val.callbacks.push(cb);
       } else {
-        observerInstance.observe(el);
+        instance.observe(el);
 
         observerPool.set(el, {
           element: el,
@@ -74,7 +74,7 @@ export function useResizeObserver(
         });
       }
 
-      return observerInstance;
+      return instance;
     },
     /**
      * 移除监听
@@ -96,11 +96,11 @@ export function useResizeObserver(
         val.callbacks.splice(idx, 1);
         if (val.callbacks.length === 0) {
           // 当el无监听时，销毁resizeObserver
-          observerInstance.unobserve(el);
+          instance.unobserve(el);
           observerPool.delete(el);
         }
         if (observerPool.size === 0) {
-          observerInstance.disconnect();
+          instance.disconnect();
         }
       }
     }
diff --git a/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue b/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue
new file mode 100644
index 00000000..fb3082fb
--- /dev/null
+++ b/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { IntersectionObserver } from '../index';
+import { OButton } from '../../button';
+import '../../button/style';
+
+const content = ref('');
+
+const rlt = reactive({
+  visible1: true,
+  visible2: true,
+});
+const onIntersection = (isEnter: boolean, en: IntersectionObserverEntry) => {
+  if (isEnter) {
+    content.value = en.target.innerHTML;
+  } else {
+    content.value = '';
+  }
+};
+
+const toggle = (key: 'visible1' | 'visible2') => {
+  rlt[key] = !rlt[key];
+};
+</script>
+<template>
+  <h4>resize observer</h4>
+
+  <div class="tip" @click="toggle('visible2')">enter into view: {{ content }}</div>
+  <div class="wrap">
+    <IntersectionObserver @intersection="(isEnter:boolean, en) => onIntersection(isEnter, en)">
+      <div v-if="rlt.visible1" class="content" :name="content">first row</div>
+      <p v-else class="content">changed: first row</p>
+      <div @click="toggle('visible1')">toggle</div>
+    </IntersectionObserver>
+    <IntersectionObserver @intersection="(isEnter:boolean, en) => onIntersection(isEnter, en)">
+      <OButton v-if="rlt.visible2" @click="toggle('visible2')"> toggle btn</OButton>
+    </IntersectionObserver>
+  </div>
+</template>
+<style lang="scss" scoped>
+.content {
+  display: inline-block;
+}
+.tip {
+  position: sticky;
+  top: 100px;
+  margin: 16px 0 32px;
+}
+.wrap {
+  height: 200vh;
+  margin-top: 100vh;
+}
+</style>
diff --git a/packages/opendesign/src/components/intersection-observer/index.ts b/packages/opendesign/src/components/intersection-observer/index.ts
new file mode 100644
index 00000000..091e3ee6
--- /dev/null
+++ b/packages/opendesign/src/components/intersection-observer/index.ts
@@ -0,0 +1 @@
+export { default as IntersectionObserver } from './intersection-observer';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/intersection-observer/intersection-observer.ts b/packages/opendesign/src/components/intersection-observer/intersection-observer.ts
new file mode 100644
index 00000000..a63b5e0e
--- /dev/null
+++ b/packages/opendesign/src/components/intersection-observer/intersection-observer.ts
@@ -0,0 +1,25 @@
+import { defineComponent, cloneVNode, withDirectives } from 'vue';
+import { useIntersectionObserverDirective } from '../hooks';
+
+/**
+ * 子元素resize监听
+ * 如果有多个子元素，每个子元素都会被监听到
+ */
+export default defineComponent({
+  name: 'ResizeObserver',
+  emits: ['intersection'],
+  setup(props, { emit, slots }) {
+    const { vIntersectionObserver } = useIntersectionObserverDirective({
+      listener: (entry: IntersectionObserverEntry) => {
+        // 触发resize事件
+        emit('intersection', entry.isIntersecting, entry);
+      },
+      removeOnUnmounted: false
+    });
+
+    return () => {
+      const children = slots.default?.();
+      return children?.map((item) => withDirectives(cloneVNode(item), [[vIntersectionObserver]]));
+    };
+  },
+});
diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserverDemo.vue
similarity index 100%
rename from packages/opendesign/src/components/resize-observer/__demo__/ResizeObserver.vue
rename to packages/opendesign/src/components/resize-observer/__demo__/ResizeObserverDemo.vue
diff --git a/packages/opendesign/src/components/vite-env.d.ts b/packages/opendesign/src/components/vite-env.d.ts
index af36df34..16d09e22 100644
--- a/packages/opendesign/src/components/vite-env.d.ts
+++ b/packages/opendesign/src/components/vite-env.d.ts
@@ -5,3 +5,7 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+declare module 'intersection-observer-polyfill' {
+  export default IntersectionObserver;
+}
\ No newline at end of file
diff --git a/packages/portal/src/pages/TheIntersectionObserver.vue b/packages/portal/src/pages/TheIntersectionObserver.vue
new file mode 100644
index 00000000..f773d957
--- /dev/null
+++ b/packages/portal/src/pages/TheIntersectionObserver.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import IntersectionObserverDemo from '@demo/intersection-observer/__demo__/IntersectionObserverDemo.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <IntersectionObserverDemo />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/pages/TheResizeObserver.vue b/packages/portal/src/pages/TheResizeObserver.vue
index 1216b237..9c5d0acf 100644
--- a/packages/portal/src/pages/TheResizeObserver.vue
+++ b/packages/portal/src/pages/TheResizeObserver.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ResizeObserver from '@demo/resize-observer/__demo__/ResizeObserver.vue';
+import ResizeObserver from '@demo/resize-observer/__demo__/ResizeObserverDemo.vue';
 </script>
 <template>
   <div class="page-demo">
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index a2858486..77f624ff 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -26,6 +26,12 @@ export const routes = [
     label: 'resize监听',
     component: () => import('./pages/TheResizeObserver.vue'),
   },
+  {
+    path: '/intersection-observer',
+    name: 'IntersectionObserver',
+    label: 'Intersection监听',
+    component: () => import('./pages/TheIntersectionObserver.vue'),
+  },
   {
     path: '/popup',
     name: 'Popup',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 026e16d6..bc28d4d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,7 @@ importers:
       '@opensig/opensig-scripts': workspace:^0.0.1
       '@types/lodash-es': ^4.17.6
       '@vue/shared': ^3.2.45
+      intersection-observer-polyfill: ^0.1.0
       lodash-es: ^4.17.21
       resize-observer-polyfill: ^1.5.1
       typescript: ^4.6.4
@@ -30,6 +31,7 @@ importers:
       vue-tsc: ^1.0.13
     dependencies:
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.45
+      intersection-observer-polyfill: 0.1.0
       lodash-es: 4.17.21
       resize-observer-polyfill: 1.5.1
     devDependencies:
@@ -1513,6 +1515,10 @@ packages:
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  /intersection-observer-polyfill/0.1.0:
+    resolution: {integrity: sha512-kYxriUk7Dl8GPu2TuOFAbtG5+UK0LLrLzlUErF8R9w5iPWmrtfVZsjCYbGF0/SyRDo1VfHMOZYBB2svb2locbw==}
+    dev: false
+
   /is-binary-path/2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
-- 
Gitee


From 2d6d3a657d4a50f36e3e5610d61ab7688ca14b48 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 30 Dec 2022 20:21:53 +0800
Subject: [PATCH 15/28] =?UTF-8?q?=E4=BC=98=E5=8C=96target=E5=9C=A8?=
 =?UTF-8?q?=E8=A7=86=E7=AA=97=E5=A4=96=E6=97=B6=EF=BC=8C=E4=B8=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BApopup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           | 52 ++++++++++++-------
 .../popup/__demo__/PopupContainer.vue         | 12 ++---
 .../opendesign/src/components/popup/popup.ts  | 16 +-----
 .../src/components/popup/style/index.scss     |  6 +++
 4 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 426d18df..05169cde 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -5,8 +5,9 @@ import { isElement, getScrollParents } from '../_shared/dom';
 import { throttleRAF } from '../_shared/utils';
 import { calcPopupStyle, bindTrigger } from './popup';
 import { useResizeObserver } from '../hooks/use-resize-observer';
-import type { ResizeObserverInstanceT } from '../hooks/use-resize-observer';
 import { ResizeObserver } from '../resize-observer';
+import { useIntersectionObserver } from '../hooks';
+import type { IntersectionListenerT } from '../hooks';
 
 const props = defineProps({
   position: {
@@ -39,27 +40,32 @@ const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
 
 const visible = ref(false);
 let targetEl: HTMLElement | null = null;
+const isTargetInViewport = ref(false);
+
 let wrapperEl: Ref<HTMLElement | null> = ref(null);
 const popWrap = ref<HTMLElement | null>(null);
 const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({ left: `${0}px`, top: `${0}px` });
 const popPosition = ref(props.position);
 // 是否在可视区域外
-const isOutside = ref(false);
 const unmount = ref(true);
 
 const resizeObserver = useResizeObserver();
+const intersctionObserver = useIntersectionObserver();
 
 // 处理popup位置
 const updatePopupStyle = () => {
+  if (!isTargetInViewport.value) {
+    return;
+  }
+
   if (!targetEl || !popWrap.value || !wrapperEl.value) {
     return;
   }
   console.log('update style');
 
-  const { style, position, isOutside: out } = calcPopupStyle(popWrap.value, targetEl, props.position);
-  isOutside.value = out;
+  const { style, position } = calcPopupStyle(popWrap.value, targetEl, props.position);
 
-  if (style && !out) {
+  if (style) {
     popStyle.top = `${Math.round(style.top)}px`;
     popStyle.left = `${Math.round(style.left)}px`;
 
@@ -67,6 +73,15 @@ const updatePopupStyle = () => {
   }
 };
 
+const onTargetInterscting: IntersectionListenerT = (entry: IntersectionObserverEntry) => {
+  isTargetInViewport.value = entry.isIntersecting;
+  if (entry.isIntersecting) {
+    if (visible.value) {
+      updatePopupStyle();
+    }
+  }
+};
+
 watch(
   () => props.visible,
   (val) => {
@@ -102,7 +117,6 @@ const updateVisible = (isVisible: boolean, delay?: number) => {
       return;
     }
     visible.value = isVisible;
-    isOutside.value = false;
     emits('update:visible', isVisible);
     if (isVisible) {
       unmount.value = false;
@@ -121,17 +135,19 @@ const updateVisible = (isVisible: boolean, delay?: number) => {
 };
 
 let triggerListener: ReturnType<typeof bindTrigger> = [];
-const bindEvent = (el: HTMLElement | null) => {
+const bindTargetEvent = (el: HTMLElement | null) => {
   if (!el) {
     return;
   }
-
   targetEl = el;
+
   const triggers = Array.isArray(props.trigger) ? props.trigger : [props.trigger];
   triggerListener = bindTrigger(el, triggers, {
     updateFn: updateVisible,
     hoverDelay: props.hoverDelay,
   });
+
+  intersctionObserver.addListener(targetEl, onTargetInterscting);
 };
 
 // 触发元素为组件ref，处理事件触发
@@ -139,7 +155,7 @@ watch(
   () => props.target,
   (ele) => {
     if (ele) {
-      bindEvent((ele as ComponentPublicInstance).$el);
+      bindTargetEvent((ele as ComponentPublicInstance).$el);
     }
   }
 );
@@ -168,7 +184,6 @@ const listenScroll = (el: HTMLElement) => {
     el.removeEventListener('scroll', scrollListener);
   };
 };
-
 watch(popWrap, (popEl) => {
   let handles: Array<() => void> = [];
   if (popEl) {
@@ -200,6 +215,7 @@ watch(popWrap, (popEl) => {
     }
     if (targetEl) {
       resizeObserver.removeListener(targetEl, onResize);
+      intersctionObserver.removeListener(targetEl, onTargetInterscting);
     }
   }
 });
@@ -210,17 +226,17 @@ onMounted(() => {
 
   // 触发元素为dom或者选择器，处理事件触发
   nextTick(() => {
-    // 初始为true时，更新样式
-    if (visible.value) {
-      updatePopupStyle();
-    }
-
     // 绑定触发元素事件
     if (typeof props.target === 'string') {
-      bindEvent(document.querySelector(props.target));
+      bindTargetEvent(document.querySelector(props.target));
     } else if (isElement(props.target)) {
-      bindEvent(props.target as HTMLElement);
+      bindTargetEvent(props.target as HTMLElement);
     }
+
+    // // 初始为true时，更新样式
+    // if (visible.value) {
+    //   updatePopupStyle();
+    // }
   });
 });
 
@@ -241,7 +257,7 @@ onUnmounted(() => {
 <template>
   <teleport v-if="!unmount || visible" :to="props.wrapper">
     <ResizeObserver @resize="onResize">
-      <div v-show="!isOutside" ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs">
+      <div ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs" :class="{ hide: !isTargetInViewport }">
         <Transition name="o-zoom-fade" :appear="true" @after-leave="handleTransitionEnd">
           <div v-if="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
             <slot></slot>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index 534d305d..dd954fbc 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -18,8 +18,8 @@ const visible = ref(true);
 const text = ref('text');
 const width = ref('50vw');
 setTimeout(() => {
-  text.value += '--|';
-  width.value = '40vw';
+  // text.value += '--|';
+  // width.value = '40vw';
 }, 2000);
 </script>
 <template>
@@ -44,7 +44,7 @@ setTimeout(() => {
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn3" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn3" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
@@ -52,7 +52,7 @@ setTimeout(() => {
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
-      <OPopup v-model:visible="visible" :position="PopupPosition.TR" :target="btn5" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup :position="PopupPosition.TR" :target="btn5" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
         <div>{{ content }}</div>
         <div>{{ content }}</div>
       </OPopup>
@@ -77,7 +77,7 @@ setTimeout(() => {
 </template>
 <style lang="scss" scoped>
 #wrap {
-  height: 120vh;
+  height: 50vh;
   width: 50vw;
   overflow: auto;
   border: 10px solid #333;
@@ -87,7 +87,7 @@ setTimeout(() => {
   // overflow: visible;
 }
 .content {
-  height: 140vh;
+  height: 50vh;
   width: 60vw;
 
   position: relative;
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index 818b295c..a9e8f37e 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -16,11 +16,6 @@ interface DomContentRect {
 
 type ElementSize = ReturnType<typeof getElementSize>
 
-// 根据元素Rect判断元素是否在视窗外
-function isOutsideViewport(tRect: DOMRect) {
-  return tRect.bottom < 0 || tRect.right < 0 || tRect.top > window.innerHeight || tRect.left > window.innerWidth;
-}
-
 // 获取wrapper content box范围，因为绝对定位需要排除border
 function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): DomContentRect {
   const { left = 0, top = 0, right = 0, bottom = 0 } = getElementBorder(wrapperEl);
@@ -256,7 +251,7 @@ function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSiz
     if (edge.top > top) {
       style.top = edge.top < popEdge.bottom ? edge.top : popEdge.bottom;
     } else if (edge.bottom < top) {
-      style.top = edge.bottom < popEdge.top ? edge.bottom : popEdge.top;
+      style.top = edge.bottom > popEdge.top ? edge.bottom : popEdge.top;
     }
   }
 
@@ -272,14 +267,6 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
 
   const tRect = targetEl.getBoundingClientRect();
 
-  // 如果target在视窗外，不显示popup
-  const isOutside = isOutsideViewport(tRect);
-  if (isOutside) {
-    return {
-      isOutside: isOutside
-    };
-  }
-
   const pRect = popupEl.getBoundingClientRect();
   const pSize = getElementSize(popupEl);
 
@@ -313,7 +300,6 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
   return {
     style,
     position: fixedPosition,
-    isOutside
   };
 };
 
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index c94c3c3c..a26c9d2b 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -5,6 +5,12 @@
   z-index: 100;
   pointer-events: none;
   min-width: 120px;
+  opacity: 1;
+  transition: opacity var(--o-transition-duration-3);
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 .o-popup-wrap {
   background-color: var(--popup-bg);
-- 
Gitee


From 56fc76e2220c06ce254a037567902ab9d375d45c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 30 Dec 2022 20:44:39 +0800
Subject: [PATCH 16/28] =?UTF-8?q?popup=E6=94=AF=E6=8C=81=E5=BD=93=E8=A7=A6?=
 =?UTF-8?q?=E5=8F=91=E5=85=83=E7=B4=A0=E4=B8=8D=E5=8F=AF=E8=A7=81=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=8E=A7=E5=88=B6=E6=98=AF=E5=90=A6=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 05169cde..b6fda4d0 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -10,37 +10,64 @@ import { useIntersectionObserver } from '../hooks';
 import type { IntersectionListenerT } from '../hooks';
 
 const props = defineProps({
+  /**
+   * 弹出位置
+   */
   position: {
     type: String as PropType<PopupPosition>,
     default: PopupPosition.LB,
   },
+  /**
+   * 触发事件
+   * 'hover','click','focus','contextMenu'
+   */
   trigger: {
     type: [String, Array<String>] as PropType<PopupTrigger | PopupTrigger[]>,
     default: PopupTrigger.HOVER,
   },
+  /**
+   * 触发元素或组件
+   */
   target: {
     type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
     default: null,
     require: true,
   },
+  /**
+   * 是否可见
+   * v-model
+   */
   visible: {
     type: Boolean,
   },
+  /**
+   * 挂载容器，默认为body
+   */
   wrapper: {
     type: [String, Object] as PropType<string | HTMLElement>,
     default: document.body,
   },
+  /**
+   * hover事件延时触发的时间（毫秒）
+   */
   hoverDelay: {
     type: Number,
     default: 100,
   },
+  /**
+   * 是否当触发元素不可见时隐藏弹出框
+   */
+  hideWhenTargetInvisible: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
 
 const visible = ref(false);
 let targetEl: HTMLElement | null = null;
-const isTargetInViewport = ref(false);
+const isTargetInViewport = ref(!props.hideWhenTargetInvisible);
 
 let wrapperEl: Ref<HTMLElement | null> = ref(null);
 const popWrap = ref<HTMLElement | null>(null);
@@ -54,7 +81,7 @@ const intersctionObserver = useIntersectionObserver();
 
 // 处理popup位置
 const updatePopupStyle = () => {
-  if (!isTargetInViewport.value) {
+  if (props.hideWhenTargetInvisible && !isTargetInViewport.value) {
     return;
   }
 
@@ -147,7 +174,9 @@ const bindTargetEvent = (el: HTMLElement | null) => {
     hoverDelay: props.hoverDelay,
   });
 
-  intersctionObserver.addListener(targetEl, onTargetInterscting);
+  if (props.hideWhenTargetInvisible) {
+    intersctionObserver.addListener(targetEl, onTargetInterscting);
+  }
 };
 
 // 触发元素为组件ref，处理事件触发
@@ -159,12 +188,14 @@ watch(
     }
   }
 );
-
 const onResize = (en: ResizeObserverEntry, isFirst: boolean) => {
   if (visible.value && !isFirst) {
     updatePopupStyle();
   }
 };
+const onPopupResize = (en: ResizeObserverEntry, isFirst: boolean) => {
+  return onResize(en, props.hideWhenTargetInvisible ? isFirst : false);
+};
 
 const handleTransitionEnd = () => {
   if (!visible.value) {
@@ -234,9 +265,9 @@ onMounted(() => {
     }
 
     // // 初始为true时，更新样式
-    // if (visible.value) {
-    //   updatePopupStyle();
-    // }
+    if (visible.value) {
+      updatePopupStyle();
+    }
   });
 });
 
@@ -256,7 +287,7 @@ onUnmounted(() => {
 </script>
 <template>
   <teleport v-if="!unmount || visible" :to="props.wrapper">
-    <ResizeObserver @resize="onResize">
+    <ResizeObserver @resize="onPopupResize">
       <div ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs" :class="{ hide: !isTargetInViewport }">
         <Transition name="o-zoom-fade" :appear="true" @after-leave="handleTransitionEnd">
           <div v-if="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
-- 
Gitee


From 9f0e5ae56ce6ca48f4637e39d60dbd657006d09b Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 30 Dec 2022 21:39:14 +0800
Subject: [PATCH 17/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BC=B9=E5=87=BA?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popover/OPopover.vue       | 63 ++++++++++++++
 .../popover/__demo__/PopoverPosition.vue      | 87 +++++++++++++++++++
 .../src/components/popover/index.ts           | 14 +++
 .../src/components/popover/style/index.scss   | 80 +++++++++++++++++
 .../src/components/popover/style/index.ts     |  1 +
 .../src/components/popover/style/var.scss     |  6 ++
 .../src/components/popover/types.ts           | 25 ++++++
 .../src/components/popup/OPopup.vue           |  2 +-
 .../popup/__demo__/PopupContainer.vue         | 61 +++++++++----
 .../popup/__demo__/PopupPosition.vue          | 55 +++++++++---
 .../popup/__demo__/PopupVisible.vue           | 15 +++-
 .../src/components/popup/style/index.scss     | 54 ------------
 12 files changed, 376 insertions(+), 87 deletions(-)
 create mode 100644 packages/opendesign/src/components/popover/OPopover.vue
 create mode 100644 packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
 create mode 100644 packages/opendesign/src/components/popover/index.ts
 create mode 100644 packages/opendesign/src/components/popover/style/index.scss
 create mode 100644 packages/opendesign/src/components/popover/style/index.ts
 create mode 100644 packages/opendesign/src/components/popover/style/var.scss
 create mode 100644 packages/opendesign/src/components/popover/types.ts

diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
new file mode 100644
index 00000000..ab97169c
--- /dev/null
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { PropType, ComponentPublicInstance } from 'vue';
+import { OPopup, PopupPosition, PopupTrigger } from '../popup';
+
+const props = defineProps({
+  /**
+   * 弹出位置
+   */
+  position: {
+    type: String as PropType<PopupPosition>,
+    default: PopupPosition.LB,
+  },
+  /**
+   * 触发事件
+   * 'hover','click','focus','contextMenu'
+   */
+  trigger: {
+    type: [String, Array<String>] as PropType<PopupTrigger | PopupTrigger[]>,
+    default: PopupTrigger.HOVER,
+  },
+  /**
+   * 触发元素或组件
+   */
+  target: {
+    type: [String, Object] as PropType<string | ComponentPublicInstance | HTMLElement | null>,
+    default: null,
+    require: true,
+  },
+  /**
+   * 是否可见
+   * v-model
+   */
+  visible: {
+    type: Boolean,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapper: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: document.body,
+  },
+});
+
+const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
+const updateVisible = (val: boolean) => {
+  emits('update:visible', val);
+};
+</script>
+<template>
+  <OPopup
+    :visible="props.visible"
+    :position="props.position"
+    :trigger="props.trigger"
+    :target="props.target"
+    :wrapper="props.wrapper"
+    @update:visible="updateVisible"
+  >
+    <div class="o-popover">
+      <slot></slot>
+    </div>
+  </OPopup>
+</template>
diff --git a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
new file mode 100644
index 00000000..b2c126c4
--- /dev/null
+++ b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { PopupPosition, OPopover } from '../index';
+
+const content = 'this is popup content';
+const btn1 = ref(null);
+const btn2 = ref(null);
+const btn3 = ref(null);
+const btn4 = ref(null);
+const btn5 = ref(null);
+const btn6 = ref(null);
+const btn7 = ref(null);
+const btn8 = ref(null);
+const btn9 = ref(null);
+const btn10 = ref(null);
+const btn11 = ref(null);
+const btn12 = ref(null);
+</script>
+<template>
+  <h4>popup position</h4>
+  <div class="position-wrap">
+    <div class="top">
+      <OButton ref="btn1"> TL </OButton>
+      <OPopover :position="PopupPosition.TL" :target="btn1">TL {{ content }} </OPopover>
+      <OButton ref="btn2"> TOP </OButton>
+      <OPopover :position="PopupPosition.TOP" :target="btn2" trigger="click">T {{ content }} </OPopover>
+      <OButton ref="btn3">TR</OButton>
+      <OPopover :position="PopupPosition.TR" :target="btn3">TR {{ content }} </OPopover>
+    </div>
+    <div class="middle">
+      <div class="left">
+        <OButton ref="btn4"> LT </OButton>
+        <OPopover :position="PopupPosition.LT" :target="btn4">LT {{ content }} </OPopover>
+        <OButton ref="btn5"> LEFT </OButton>
+        <OPopover :position="PopupPosition.LEFT" :target="btn5">L {{ content }} </OPopover>
+        <OButton ref="btn6"> LB </OButton>
+        <OPopover :position="PopupPosition.LB" :target="btn6">LB {{ content }} </OPopover>
+      </div>
+      <div class="right">
+        <OButton ref="btn7"> RT </OButton>
+        <OPopover :position="PopupPosition.RT" :target="btn7">R {{ content }} </OPopover>
+        <OButton ref="btn8"> RIGHT </OButton>
+        <OPopover :position="PopupPosition.RIGHT" :target="btn8">R {{ content }} </OPopover>
+        <OButton ref="btn9"> RB </OButton>
+        <OPopover :position="PopupPosition.RB" :target="btn9">RB {{ content }} </OPopover>
+      </div>
+    </div>
+    <div class="bottom">
+      <OButton ref="btn10"> BL </OButton>
+      <OPopover :position="PopupPosition.BL" :target="btn10">BL {{ content }} </OPopover>
+      <OButton ref="btn11"> BOTTOM </OButton>
+      <OPopover :position="PopupPosition.BOTTOM" :target="btn11" trigger="click">B {{ content }} </OPopover>
+      <OButton ref="btn12"> BR </OButton>
+      <OPopover :position="PopupPosition.BR" :target="btn12">BR {{ content }} </OPopover>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.position-wrap {
+  padding: 100px;
+  height: 50vh;
+  overflow: auto;
+  border: 1px solid #333;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.left > * {
+  display: block;
+  margin: 100px;
+}
+.middle {
+  display: flex;
+  justify-content: space-between;
+}
+.right > * {
+  display: block;
+  margin: 100px;
+}
+.bottom {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/packages/opendesign/src/components/popover/index.ts b/packages/opendesign/src/components/popover/index.ts
new file mode 100644
index 00000000..70144179
--- /dev/null
+++ b/packages/opendesign/src/components/popover/index.ts
@@ -0,0 +1,14 @@
+import _OPopover from './OPopover.vue';
+import type { App } from 'vue';
+
+export * from './types';
+
+const OPopover = Object.assign(_OPopover, {
+  install(app: App) {
+    app.component(_OPopover.name, _OPopover);
+  },
+});
+
+export {
+  OPopover,
+};
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss
new file mode 100644
index 00000000..cab27b15
--- /dev/null
+++ b/packages/opendesign/src/components/popover/style/index.scss
@@ -0,0 +1,80 @@
+@import './var.scss';
+
+.o-popover {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  // border: 1px solid red;
+  min-width: 120px;
+}
+
+.o-popup-pos-bl {
+  .o-popover {
+    margin-top: var(--popup-gap);
+  }
+}
+.o-popup-pos-bottom {
+  .o-popover {
+    margin-top: var(--popup-gap);
+  }
+}
+.o-popup-pos-br {
+  .o-popover {
+    margin-top: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-tl {
+  .o-popover {
+    margin-bottom: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-top {
+  .o-popover {
+    margin-bottom: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-tr {
+  .o-popover {
+    margin-bottom: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-lt {
+  .o-popover {
+    margin-right: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-left {
+  .o-popover {
+    margin-right: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-lb {
+  .o-popover {
+    margin-right: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-rt {
+  .o-popover {
+    margin-left: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-right {
+  .o-popover {
+    margin-left: var(--popup-gap);
+  }
+}
+
+.o-popup-pos-rb {
+  .o-popover {
+    margin-left: var(--popup-gap);
+  }
+}
diff --git a/packages/opendesign/src/components/popover/style/index.ts b/packages/opendesign/src/components/popover/style/index.ts
new file mode 100644
index 00000000..67aac616
--- /dev/null
+++ b/packages/opendesign/src/components/popover/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/popover/style/var.scss b/packages/opendesign/src/components/popover/style/var.scss
new file mode 100644
index 00000000..995c7dd3
--- /dev/null
+++ b/packages/opendesign/src/components/popover/style/var.scss
@@ -0,0 +1,6 @@
+.o-popover {
+  --popup-bg: var(--o-color-bg2);
+  --popup-shadow: var(--o-shadow-1);
+  --popup-gap: 4px;
+  --popup-radius: var(--o-radius-s);
+}
diff --git a/packages/opendesign/src/components/popover/types.ts b/packages/opendesign/src/components/popover/types.ts
new file mode 100644
index 00000000..905f935d
--- /dev/null
+++ b/packages/opendesign/src/components/popover/types.ts
@@ -0,0 +1,25 @@
+export enum PopupPosition {
+  TOP = 'top', // top
+  BOTTOM = 'bottom', // bottom
+  LEFT = 'left', // left
+  RIGHT = 'right', // right
+  LT = 'lt', //left-top
+  TL = 'tl', //top-left
+  LB = 'lb', //left-bottom,
+  BL = 'bl', //bottom-left,
+  RT = 'rt', //right-top,
+  TR = 'tr', //top-right,
+  RB = 'rb', //right-bottom,
+  BR = 'br', //bottom-right,
+}
+
+
+export type FullPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+
+export enum PopupTrigger {
+  NULL = 'null',
+  HOVER = 'hover',
+  CLICK = 'click',
+  FOUCS = 'foucs',
+  CONTEXT_MENU = 'contextmenu'
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index b6fda4d0..37789e4c 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -55,7 +55,7 @@ const props = defineProps({
     default: 100,
   },
   /**
-   * 是否当触发元素不可见时隐藏弹出框
+   * 是否当触发元素不可见时隐藏弹层
    */
   hideWhenTargetInvisible: {
     type: Boolean,
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index dd954fbc..e16412b9 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -37,45 +37,70 @@ setTimeout(() => {
       <OButton ref="btn9" class="btn9">TL btn9 </OButton>
 
       <OPopup :position="PopupPosition.TL" :target="btn1" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
       <OPopup :position="PopupPosition.TR" :target="btn2" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
       <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn3" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
       <OPopup :position="PopupPosition.LT" :target="btn4" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
       <OPopup :position="PopupPosition.TR" :target="btn5" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
       <OPopup :position="PopupPosition.TL" :target="btn6" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
       <OPopup :position="PopupPosition.LEFT" :target="btn7" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
       <OPopup :position="PopupPosition.BL" :target="btn8" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div class="tip">{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div class="tip">{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
       <OPopup :position="PopupPosition.TL" :target="btn9" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
-        <div>{{ content }}</div>
-        <div>{{ content }}</div>
+        <div class="popup-box">
+          <div>{{ content }}</div>
+          <div>{{ content }}</div>
+        </div>
       </OPopup>
     </div>
   </div>
 </template>
 <style lang="scss" scoped>
+.popup-box {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  border: 1px solid red;
+}
 #wrap {
   height: 50vh;
   width: 50vw;
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
index 39ab5788..1e032263 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
@@ -23,41 +23,72 @@ const btn12 = ref(null);
   <div class="position-wrap">
     <div class="top">
       <OButton ref="btn1"> TL </OButton>
-      <OPopup :position="PopupPosition.TL" :target="btn1">TL {{ content }} </OPopup>
+      <OPopup :position="PopupPosition.TL" :target="btn1">
+        <div class="popup-box">TL {{ content }}</div>
+      </OPopup>
       <OButton ref="btn2"> TOP </OButton>
-      <OPopup :position="PopupPosition.TOP" :target="btn2" trigger="click">T {{ content }} </OPopup>
+      <OPopup :position="PopupPosition.TOP" :target="btn2" trigger="click">
+        <div class="popup-box">T {{ content }}</div>
+      </OPopup>
       <OButton ref="btn3">TR</OButton>
-      <OPopup :position="PopupPosition.TR" :target="btn3">TR {{ content }} </OPopup>
+      <OPopup :position="PopupPosition.TR" :target="btn3">
+        <div class="popup-box">TR {{ content }}</div>
+      </OPopup>
     </div>
     <div class="middle">
       <div class="left">
         <OButton ref="btn4"> LT </OButton>
-        <OPopup :position="PopupPosition.LT" :target="btn4">LT {{ content }} </OPopup>
+        <OPopup :position="PopupPosition.LT" :target="btn4">
+          <div class="popup-box">LT {{ content }}</div>
+        </OPopup>
         <OButton ref="btn5"> LEFT </OButton>
-        <OPopup :position="PopupPosition.LEFT" :target="btn5">L {{ content }} </OPopup>
+        <OPopup :position="PopupPosition.LEFT" :target="btn5">
+          <div class="popup-box">L {{ content }}</div>
+        </OPopup>
         <OButton ref="btn6"> LB </OButton>
-        <OPopup :position="PopupPosition.LB" :target="btn6">LB {{ content }} </OPopup>
+        <OPopup :position="PopupPosition.LB" :target="btn6">
+          <div class="popup-box">LB {{ content }}</div>
+        </OPopup>
       </div>
       <div class="right">
         <OButton ref="btn7"> RT </OButton>
-        <OPopup :position="PopupPosition.RT" :target="btn7">R {{ content }} </OPopup>
+        <OPopup :position="PopupPosition.RT" :target="btn7">
+          <div class="popup-box">R {{ content }}</div>
+        </OPopup>
         <OButton ref="btn8"> RIGHT </OButton>
-        <OPopup :position="PopupPosition.RIGHT" :target="btn8">R {{ content }} </OPopup>
+        <OPopup :position="PopupPosition.RIGHT" :target="btn8">
+          <div class="popup-box">R {{ content }}</div>
+        </OPopup>
         <OButton ref="btn9"> RB </OButton>
-        <OPopup :position="PopupPosition.RB" :target="btn9">RB {{ content }} </OPopup>
+        <OPopup :position="PopupPosition.RB" :target="btn9">
+          <div class="popup-box">RB {{ content }}</div>
+        </OPopup>
       </div>
     </div>
     <div class="bottom">
       <OButton ref="btn10"> BL </OButton>
-      <OPopup :position="PopupPosition.BL" :target="btn10">BL {{ content }} </OPopup>
+      <OPopup :position="PopupPosition.BL" :target="btn10">
+        <div class="popup-box">BL {{ content }}</div>
+      </OPopup>
       <OButton ref="btn11"> BOTTOM </OButton>
-      <OPopup :position="PopupPosition.BOTTOM" :target="btn11" trigger="click">B {{ content }} </OPopup>
+      <OPopup :position="PopupPosition.BOTTOM" :target="btn11" trigger="click">
+        <div class="popup-box">B {{ content }}</div>
+      </OPopup>
       <OButton ref="btn12"> BR </OButton>
-      <OPopup :position="PopupPosition.BR" :target="btn12">BR {{ content }} </OPopup>
+      <OPopup :position="PopupPosition.BR" :target="btn12">
+        <div class="popup-box">BR {{ content }}</div>
+      </OPopup>
     </div>
   </div>
 </template>
 <style lang="scss" scoped>
+.popup-box {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  border: 1px solid red;
+}
 .position-wrap {
   padding: 100px;
   height: 50vh;
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
index 3cec7043..9f17d992 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
@@ -18,9 +18,13 @@ setTimeout(() => {
     <div class="row">visible: {{ visible }}</div>
     <div>
       <OButton ref="btn1" class="btn">Button</OButton>
-      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn1">TL {{ content }} </OPopup>
+      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn1">
+        <div class="popup-box">TL {{ content }}</div>
+      </OPopup>
       <OButton ref="btn2" class="btn"> TOP </OButton>
-      <OPopup :visible="visible" :position="PopupPosition.BOTTOM" :target="btn2" :trigger="PopupTrigger.NULL">T {{ content }} </OPopup>
+      <OPopup :visible="visible" :position="PopupPosition.BOTTOM" :target="btn2" :trigger="PopupTrigger.NULL">
+        <div class="popup-box">TL {{ content }}</div>
+      </OPopup>
     </div>
   </section>
 </template>
@@ -28,4 +32,11 @@ setTimeout(() => {
 .btn {
   margin-left: 100px;
 }
+.popup-box {
+  background-color: var(--popup-bg);
+  box-shadow: var(--popup-shadow);
+  padding: 4px 8px;
+  border-radius: var(--popup-radius);
+  border: 1px solid red;
+}
 </style>
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index a26c9d2b..916ec2c7 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -4,7 +4,6 @@
   position: absolute;
   z-index: 100;
   pointer-events: none;
-  min-width: 120px;
   opacity: 1;
   transition: opacity var(--o-transition-duration-3);
   &.hide {
@@ -12,56 +11,3 @@
     pointer-events: none;
   }
 }
-.o-popup-wrap {
-  background-color: var(--popup-bg);
-  box-shadow: var(--popup-shadow);
-  padding: 4px 8px;
-  border-radius: var(--popup-radius);
-  border: 1px solid red;
-}
-
-.o-popup-pos-bl {
-  margin-top: var(--popup-gap);
-}
-.o-popup-pos-bottom {
-  margin-top: var(--popup-gap);
-}
-.o-popup-pos-br {
-  margin-top: var(--popup-gap);
-}
-
-.o-popup-pos-tl {
-  margin-bottom: var(--popup-gap);
-}
-
-.o-popup-pos-top {
-  margin-bottom: var(--popup-gap);
-}
-
-.o-popup-pos-tr {
-  margin-bottom: var(--popup-gap);
-}
-
-.o-popup-pos-lt {
-  margin-right: var(--popup-gap);
-}
-
-.o-popup-pos-left {
-  margin-right: var(--popup-gap);
-}
-
-.o-popup-pos-lb {
-  margin-right: var(--popup-gap);
-}
-
-.o-popup-pos-rt {
-  margin-left: var(--popup-gap);
-}
-
-.o-popup-pos-right {
-  margin-left: var(--popup-gap);
-}
-
-.o-popup-pos-rb {
-  margin-left: var(--popup-gap);
-}
-- 
Gitee


From bab41a1e2902c3e3008a3e3a8a779412e7ce3c29 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 30 Dec 2022 22:03:19 +0800
Subject: [PATCH 18/28] =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/_shared/dom.ts  |   6 +-
 .../src/components/popover/OPopover.vue       |  10 +-
 .../popover/__demo__/PopoverPosition.vue      |  26 ++--
 .../src/components/popover/index.ts           |   2 -
 .../src/components/popover/types.ts           |  25 ----
 .../src/components/popup/OPopup.vue           |  10 +-
 .../popup/__demo__/PopupContainer.vue         |  20 +--
 .../popup/__demo__/PopupPosition.vue          |  26 ++--
 .../popup/__demo__/PopupVisible.vue           |   6 +-
 .../opendesign/src/components/popup/popup.ts  | 134 +++++++++---------
 .../opendesign/src/components/popup/types.ts  |  26 +---
 11 files changed, 124 insertions(+), 167 deletions(-)
 delete mode 100644 packages/opendesign/src/components/popover/types.ts

diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts
index 45ea5632..879a065f 100644
--- a/packages/opendesign/src/components/_shared/dom.ts
+++ b/packages/opendesign/src/components/_shared/dom.ts
@@ -1,4 +1,4 @@
-export type Direction = 'left' | 'right' | 'top' | 'bottom';
+export type DirectionT = 'left' | 'right' | 'top' | 'bottom';
 
 export function isElement(el: any) {
   return (typeof HTMLElement === 'object')
@@ -72,9 +72,9 @@ export function getElementSize(el: HTMLElement | Window) {
   };
 }
 
-export function getElementBorder(el: HTMLElement, dir?: Direction | Direction[]) {
+export function getElementBorder(el: HTMLElement, dir?: DirectionT | DirectionT[]) {
   const style = window.getComputedStyle(el);
-  let d: Direction[] = [];
+  let d: DirectionT[] = [];
 
   if (typeof dir === 'string') {
     d = [dir];
diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
index ab97169c..4dd0f405 100644
--- a/packages/opendesign/src/components/popover/OPopover.vue
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
 import { PropType, ComponentPublicInstance } from 'vue';
-import { OPopup, PopupPosition, PopupTrigger } from '../popup';
+import { OPopup, PopupPositionT, PopupTriggerT } from '../popup';
 
 const props = defineProps({
   /**
    * 弹出位置
    */
   position: {
-    type: String as PropType<PopupPosition>,
-    default: PopupPosition.LB,
+    type: String as PropType<PopupPositionT>,
+    default: 'top',
   },
   /**
    * 触发事件
    * 'hover','click','focus','contextMenu'
    */
   trigger: {
-    type: [String, Array<String>] as PropType<PopupTrigger | PopupTrigger[]>,
-    default: PopupTrigger.HOVER,
+    type: [String, Array<String>] as PropType<PopupTriggerT | PopupTriggerT[]>,
+    default: 'hover',
   },
   /**
    * 触发元素或组件
diff --git a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
index b2c126c4..fbd9ede6 100644
--- a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
+++ b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { OButton } from '../../button';
 import '../../button/style';
-import { PopupPosition, OPopover } from '../index';
+import { OPopover } from '../index';
 
 const content = 'this is popup content';
 const btn1 = ref(null);
@@ -23,37 +23,37 @@ const btn12 = ref(null);
   <div class="position-wrap">
     <div class="top">
       <OButton ref="btn1"> TL </OButton>
-      <OPopover :position="PopupPosition.TL" :target="btn1">TL {{ content }} </OPopover>
+      <OPopover position="tl" :target="btn1">TL {{ content }} </OPopover>
       <OButton ref="btn2"> TOP </OButton>
-      <OPopover :position="PopupPosition.TOP" :target="btn2" trigger="click">T {{ content }} </OPopover>
+      <OPopover position="top" :target="btn2" trigger="click">T {{ content }} </OPopover>
       <OButton ref="btn3">TR</OButton>
-      <OPopover :position="PopupPosition.TR" :target="btn3">TR {{ content }} </OPopover>
+      <OPopover position="tr" :target="btn3">TR {{ content }} </OPopover>
     </div>
     <div class="middle">
       <div class="left">
         <OButton ref="btn4"> LT </OButton>
-        <OPopover :position="PopupPosition.LT" :target="btn4">LT {{ content }} </OPopover>
+        <OPopover position="lt" :target="btn4">LT {{ content }} </OPopover>
         <OButton ref="btn5"> LEFT </OButton>
-        <OPopover :position="PopupPosition.LEFT" :target="btn5">L {{ content }} </OPopover>
+        <OPopover position="left" :target="btn5">L {{ content }} </OPopover>
         <OButton ref="btn6"> LB </OButton>
-        <OPopover :position="PopupPosition.LB" :target="btn6">LB {{ content }} </OPopover>
+        <OPopover position="lb" :target="btn6">LB {{ content }} </OPopover>
       </div>
       <div class="right">
         <OButton ref="btn7"> RT </OButton>
-        <OPopover :position="PopupPosition.RT" :target="btn7">R {{ content }} </OPopover>
+        <OPopover position="rt" :target="btn7">R {{ content }} </OPopover>
         <OButton ref="btn8"> RIGHT </OButton>
-        <OPopover :position="PopupPosition.RIGHT" :target="btn8">R {{ content }} </OPopover>
+        <OPopover position="right" :target="btn8">R {{ content }} </OPopover>
         <OButton ref="btn9"> RB </OButton>
-        <OPopover :position="PopupPosition.RB" :target="btn9">RB {{ content }} </OPopover>
+        <OPopover position="rb" :target="btn9">RB {{ content }} </OPopover>
       </div>
     </div>
     <div class="bottom">
       <OButton ref="btn10"> BL </OButton>
-      <OPopover :position="PopupPosition.BL" :target="btn10">BL {{ content }} </OPopover>
+      <OPopover position="bl" :target="btn10">BL {{ content }} </OPopover>
       <OButton ref="btn11"> BOTTOM </OButton>
-      <OPopover :position="PopupPosition.BOTTOM" :target="btn11" trigger="click">B {{ content }} </OPopover>
+      <OPopover position="bottom" :target="btn11" trigger="click">B {{ content }} </OPopover>
       <OButton ref="btn12"> BR </OButton>
-      <OPopover :position="PopupPosition.BR" :target="btn12">BR {{ content }} </OPopover>
+      <OPopover position="br" :target="btn12">BR {{ content }} </OPopover>
     </div>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/popover/index.ts b/packages/opendesign/src/components/popover/index.ts
index 70144179..f9475923 100644
--- a/packages/opendesign/src/components/popover/index.ts
+++ b/packages/opendesign/src/components/popover/index.ts
@@ -1,8 +1,6 @@
 import _OPopover from './OPopover.vue';
 import type { App } from 'vue';
 
-export * from './types';
-
 const OPopover = Object.assign(_OPopover, {
   install(app: App) {
     app.component(_OPopover.name, _OPopover);
diff --git a/packages/opendesign/src/components/popover/types.ts b/packages/opendesign/src/components/popover/types.ts
deleted file mode 100644
index 905f935d..00000000
--- a/packages/opendesign/src/components/popover/types.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export enum PopupPosition {
-  TOP = 'top', // top
-  BOTTOM = 'bottom', // bottom
-  LEFT = 'left', // left
-  RIGHT = 'right', // right
-  LT = 'lt', //left-top
-  TL = 'tl', //top-left
-  LB = 'lb', //left-bottom,
-  BL = 'bl', //bottom-left,
-  RT = 'rt', //right-top,
-  TR = 'tr', //top-right,
-  RB = 'rb', //right-bottom,
-  BR = 'br', //bottom-right,
-}
-
-
-export type FullPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
-
-export enum PopupTrigger {
-  NULL = 'null',
-  HOVER = 'hover',
-  CLICK = 'click',
-  FOUCS = 'foucs',
-  CONTEXT_MENU = 'contextmenu'
-}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 37789e4c..050284dc 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance } from 'vue';
-import { PopupPosition, PopupTrigger } from './types';
+import { PopupPositionT, PopupTriggerT } from './types';
 import { isElement, getScrollParents } from '../_shared/dom';
 import { throttleRAF } from '../_shared/utils';
 import { calcPopupStyle, bindTrigger } from './popup';
@@ -14,16 +14,16 @@ const props = defineProps({
    * 弹出位置
    */
   position: {
-    type: String as PropType<PopupPosition>,
-    default: PopupPosition.LB,
+    type: String as PropType<PopupPositionT>,
+    default: 'top',
   },
   /**
    * 触发事件
    * 'hover','click','focus','contextMenu'
    */
   trigger: {
-    type: [String, Array<String>] as PropType<PopupTrigger | PopupTrigger[]>,
-    default: PopupTrigger.HOVER,
+    type: [String, Array<String>] as PropType<PopupTriggerT | PopupTriggerT[]>,
+    default: 'hover',
   },
   /**
    * 触发元素或组件
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index e16412b9..ad7b3ccb 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { OButton } from '../../button';
 import '../../button/style';
-import { PopupPosition, OPopup, PopupTrigger } from '../index';
+import { OPopup } from '../index';
 
 const content = 'this is popup content';
 const btn1 = ref(null);
@@ -36,55 +36,55 @@ setTimeout(() => {
       <OButton ref="btn8" class="btn8">BL btn8 </OButton>
       <OButton ref="btn9" class="btn9">TL btn9 </OButton>
 
-      <OPopup :position="PopupPosition.TL" :target="btn1" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup :position="PopupPosition.TR" :target="btn2" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup position="tr" :target="btn2" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn3" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup v-model:visible="visible" position="lt" :target="btn3" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup :position="PopupPosition.LT" :target="btn4" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup position="lt" :target="btn4" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup :position="PopupPosition.TR" :target="btn5" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup position="tr" :target="btn5" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn6" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup position="lt" :target="btn6" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup :position="PopupPosition.LEFT" :target="btn7" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup position="left" :target="btn7" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup :position="PopupPosition.BL" :target="btn8" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup position="bl" :target="btn8" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div class="tip">{{ content }}</div>
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup :position="PopupPosition.TL" :target="btn9" wrapper="#wrap" :trigger="PopupTrigger.CLICK">
+      <OPopup position="lt" :target="btn9" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
index 1e032263..a069a80b 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { OButton } from '../../button';
 import '../../button/style';
-import { PopupPosition, OPopup } from '../index';
+import { OPopup } from '../index';
 
 const content = 'this is popup content';
 const btn1 = ref(null);
@@ -23,59 +23,59 @@ const btn12 = ref(null);
   <div class="position-wrap">
     <div class="top">
       <OButton ref="btn1"> TL </OButton>
-      <OPopup :position="PopupPosition.TL" :target="btn1">
+      <OPopup position="tl" :target="btn1">
         <div class="popup-box">TL {{ content }}</div>
       </OPopup>
       <OButton ref="btn2"> TOP </OButton>
-      <OPopup :position="PopupPosition.TOP" :target="btn2" trigger="click">
+      <OPopup position="top" :target="btn2" trigger="click">
         <div class="popup-box">T {{ content }}</div>
       </OPopup>
       <OButton ref="btn3">TR</OButton>
-      <OPopup :position="PopupPosition.TR" :target="btn3">
+      <OPopup position="tr" :target="btn3">
         <div class="popup-box">TR {{ content }}</div>
       </OPopup>
     </div>
     <div class="middle">
       <div class="left">
         <OButton ref="btn4"> LT </OButton>
-        <OPopup :position="PopupPosition.LT" :target="btn4">
+        <OPopup position="lt" :target="btn4">
           <div class="popup-box">LT {{ content }}</div>
         </OPopup>
         <OButton ref="btn5"> LEFT </OButton>
-        <OPopup :position="PopupPosition.LEFT" :target="btn5">
+        <OPopup position="left" :target="btn5">
           <div class="popup-box">L {{ content }}</div>
         </OPopup>
         <OButton ref="btn6"> LB </OButton>
-        <OPopup :position="PopupPosition.LB" :target="btn6">
+        <OPopup position="lb" :target="btn6">
           <div class="popup-box">LB {{ content }}</div>
         </OPopup>
       </div>
       <div class="right">
         <OButton ref="btn7"> RT </OButton>
-        <OPopup :position="PopupPosition.RT" :target="btn7">
+        <OPopup position="rt" :target="btn7">
           <div class="popup-box">R {{ content }}</div>
         </OPopup>
         <OButton ref="btn8"> RIGHT </OButton>
-        <OPopup :position="PopupPosition.RIGHT" :target="btn8">
+        <OPopup position="right" :target="btn8">
           <div class="popup-box">R {{ content }}</div>
         </OPopup>
         <OButton ref="btn9"> RB </OButton>
-        <OPopup :position="PopupPosition.RB" :target="btn9">
+        <OPopup position="rb" :target="btn9">
           <div class="popup-box">RB {{ content }}</div>
         </OPopup>
       </div>
     </div>
     <div class="bottom">
       <OButton ref="btn10"> BL </OButton>
-      <OPopup :position="PopupPosition.BL" :target="btn10">
+      <OPopup position="bl" :target="btn10">
         <div class="popup-box">BL {{ content }}</div>
       </OPopup>
       <OButton ref="btn11"> BOTTOM </OButton>
-      <OPopup :position="PopupPosition.BOTTOM" :target="btn11" trigger="click">
+      <OPopup position="bottom" :target="btn11" trigger="click">
         <div class="popup-box">B {{ content }}</div>
       </OPopup>
       <OButton ref="btn12"> BR </OButton>
-      <OPopup :position="PopupPosition.BR" :target="btn12">
+      <OPopup position="br" :target="btn12">
         <div class="popup-box">BR {{ content }}</div>
       </OPopup>
     </div>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
index 9f17d992..a2d75fb3 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupVisible.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { OButton } from '../../button';
 import '../../button/style';
-import { PopupPosition, OPopup, PopupTrigger } from '../index';
+import { OPopup } from '../index';
 
 const content = 'this is popup content';
 const btn1 = ref(null);
@@ -18,11 +18,11 @@ setTimeout(() => {
     <div class="row">visible: {{ visible }}</div>
     <div>
       <OButton ref="btn1" class="btn">Button</OButton>
-      <OPopup v-model:visible="visible" :position="PopupPosition.TL" :target="btn1">
+      <OPopup v-model:visible="visible" position="tl" :target="btn1">
         <div class="popup-box">TL {{ content }}</div>
       </OPopup>
       <OButton ref="btn2" class="btn"> TOP </OButton>
-      <OPopup :visible="visible" :position="PopupPosition.BOTTOM" :target="btn2" :trigger="PopupTrigger.NULL">
+      <OPopup :visible="visible" position="bottom" :target="btn2" trigger="none">
         <div class="popup-box">TL {{ content }}</div>
       </OPopup>
     </div>
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index a9e8f37e..90afad80 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -1,6 +1,6 @@
 import { getElementBorder, getElementSize, getOffsetElement, getScroll } from '../_shared/dom';
-import type { Direction } from '../_shared/dom';
-import { PopupPosition, FullPosition, PopupTrigger } from './types';
+import type { DirectionT } from '../_shared/dom';
+import type { PopupPositionT, PopupTriggerT } from './types';
 import { listenOutClick } from '../directves';
 
 interface Pos {
@@ -29,9 +29,9 @@ function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): D
 }
 
 // 根据position计算popup的位置
-function getPopupViewOffset(position: FullPosition, t: DOMRect, p: DOMRect): Pos {
+function getPopupViewOffset(position: PopupPositionT, t: DOMRect, p: DOMRect): Pos {
   const formula: {
-    [k in FullPosition]: { left: number, top: number }
+    [k in PopupPositionT]: { left: number, top: number }
   } = {
     top: {
       left: t.left + t.width / 2 - p.width / 2,
@@ -137,67 +137,67 @@ function getPopupWrapOffset(pos: Pos, wrapperEl: HTMLElement | null, wrapperCont
 }
 
 // 根据position获取方向
-function getDirection(position: PopupPosition): Direction {
+function getDirection(position: PopupPositionT): DirectionT {
   switch (position) {
-    case PopupPosition.TL:
-    case PopupPosition.TR:
-    case PopupPosition.TOP:
+    case 'tl':
+    case 'tr':
+    case 'top':
       return 'top';
-    case PopupPosition.BL:
-    case PopupPosition.BR:
-    case PopupPosition.BOTTOM:
+    case 'bl':
+    case 'br':
+    case 'bottom':
       return 'bottom';
-    case PopupPosition.LT:
-    case PopupPosition.LB:
-    case PopupPosition.LEFT:
+    case 'lt':
+    case 'lb':
+    case 'left':
       return 'left';
-    case PopupPosition.RT:
-    case PopupPosition.RB:
-    case PopupPosition.RIGHT:
+    case 'rt':
+    case 'rb':
+    case 'right':
       return 'right';
   }
 }
 
 // 调整position
-function adjustPosition(position: PopupPosition, direction: Direction) {
+function adjustPosition(position: PopupPositionT, direction: DirectionT) {
   const fixFn = {
-    top: (p: PopupPosition) => {
-      if (p === PopupPosition.BOTTOM) {
-        return PopupPosition.TOP;
-      } else if (p === PopupPosition.BL) {
-        return PopupPosition.TL;
-      } else if (p === PopupPosition.BR) {
-        return PopupPosition.TR;
+    top: (p: PopupPositionT) => {
+      if (p === 'bottom') {
+        return 'top';
+      } else if (p === 'bl') {
+        return 'tl';
+      } else if (p === 'br') {
+        return 'tr';
       }
       return p;
     },
-    bottom: (p: PopupPosition) => {
-      if (p === PopupPosition.TOP) {
-        return PopupPosition.BOTTOM;
-      } else if (p === PopupPosition.TL) {
-        return PopupPosition.BL;
-      } else if (p === PopupPosition.TR) {
-        return PopupPosition.BR;
+    bottom: (p: PopupPositionT) => {
+      if (p === 'top') {
+        return 'bottom';
+      } else if (p === 'tl') {
+        return 'bl';
+      } else if (p === 'tr') {
+        return 'br';
       }
       return p;
     },
-    left: (p: PopupPosition) => {
-      if (p === PopupPosition.RIGHT) {
-        return PopupPosition.LEFT;
-      } else if (p === PopupPosition.RT) {
-        return PopupPosition.LT;
-      } else if (p === PopupPosition.RB) {
-        return PopupPosition.LB;
+    left: (p: PopupPositionT) => {
+      if (p === 'right') {
+        return 'left';
+      } else if (p === 'rt') {
+        return 'lt';
+      } else if (p === 'rb') {
+        return 'lb';
       }
       return p;
     },
-    right: (p: PopupPosition) => {
-      if (p === PopupPosition.LEFT) {
-        return PopupPosition.RIGHT;
-      } else if (p === PopupPosition.LT) {
-        return PopupPosition.RT;
-      } else if (p === PopupPosition.LB) {
-        return PopupPosition.RB;
+    right: (p: PopupPositionT) => {
+      if (p === 'left') {
+        return 'right';
+      } else if (p === 'lt') {
+        return 'rt';
+      } else if (p === 'lb') {
+        return 'rb';
       }
       return p;
     }
@@ -208,7 +208,7 @@ function adjustPosition(position: PopupPosition, direction: Direction) {
 }
 
 // 根据popup的极值调整
-function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSize, pRect: DOMRect, tRect: DOMRect, wRect?: DomContentRect) {
+function adjustOffset(position: PopupPositionT, pPosition: Pos, pSize: ElementSize, pRect: DOMRect, tRect: DOMRect, wRect?: DomContentRect) {
   const { top, left } = pPosition;
   const edge = getWrapperViewEdge(pSize, wRect);
 
@@ -262,7 +262,7 @@ function adjustOffset(position: PopupPosition, pPosition: Pos, pSize: ElementSiz
 }
 
 // 处理popup位置
-export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, position: PopupPosition,
+export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, position: PopupPositionT,
   { adaptive = true }: { adaptive?: boolean } = {}) {
 
   const tRect = targetEl.getBoundingClientRect();
@@ -303,12 +303,10 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
   };
 };
 
-
-
 // 监听元素的触发事件
 export function bindTrigger(
   el: HTMLElement | null,
-  triggers: PopupTrigger[],
+  triggers: PopupTriggerT[],
   {
     updateFn,
     hoverDelay = 100
@@ -337,8 +335,8 @@ export function bindTrigger(
     updateFn(false, hoverDelay);
   };
 
-  triggers.forEach((tr: PopupTrigger) => {
-    if (tr === PopupTrigger.HOVER) {
+  const triggerHandlers: Record<PopupTriggerT, () => void> = {
+    hover: () => {
       el?.addEventListener('mouseover', enterFn);
       el?.addEventListener('mouseleave', leavefn);
       const removeFn = () => {
@@ -346,15 +344,8 @@ export function bindTrigger(
         el?.removeEventListener('mouseleave', leavefn);
       };
       listeners.push(removeFn);
-    } else if (tr === PopupTrigger.FOUCS) {
-      el?.addEventListener('focusin', showFn);
-      el?.addEventListener('focusout', hideFn);
-      const removeFn = () => {
-        el?.removeEventListener('focusin', showFn);
-        el?.removeEventListener('focusout', hideFn);
-      };
-      listeners.push(removeFn);
-    } else if (tr === PopupTrigger.CLICK) {
+    },
+    click: () => {
       el?.addEventListener('click', showFn);
 
       const removeFn = listenOutClick(el, hideFn);
@@ -363,7 +354,17 @@ export function bindTrigger(
         el?.removeEventListener('click', showFn);
       });
       listeners.push(removeFn);
-    } else if (tr === PopupTrigger.CONTEXT_MENU) {
+    },
+    focus: () => {
+      el?.addEventListener('focusin', showFn);
+      el?.addEventListener('focusout', hideFn);
+      const removeFn = () => {
+        el?.removeEventListener('focusin', showFn);
+        el?.removeEventListener('focusout', hideFn);
+      };
+      listeners.push(removeFn);
+    },
+    contextmenu: () => {
       const fn = (e: Event) => {
         e.preventDefault();
         showFn();
@@ -376,7 +377,12 @@ export function bindTrigger(
         el?.removeEventListener('contextmenu', fn);
       });
       listeners.push(removeFn);
-    }
+    },
+    none: () => { }
+  };
+
+  triggers.forEach((tr: PopupTriggerT) => {
+    triggerHandlers[tr]();
   });
 
   return listeners;
diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts
index 905f935d..9a241c11 100644
--- a/packages/opendesign/src/components/popup/types.ts
+++ b/packages/opendesign/src/components/popup/types.ts
@@ -1,25 +1,3 @@
-export enum PopupPosition {
-  TOP = 'top', // top
-  BOTTOM = 'bottom', // bottom
-  LEFT = 'left', // left
-  RIGHT = 'right', // right
-  LT = 'lt', //left-top
-  TL = 'tl', //top-left
-  LB = 'lb', //left-bottom,
-  BL = 'bl', //bottom-left,
-  RT = 'rt', //right-top,
-  TR = 'tr', //top-right,
-  RB = 'rb', //right-bottom,
-  BR = 'br', //bottom-right,
-}
+export type PopupPositionT = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
 
-
-export type FullPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
-
-export enum PopupTrigger {
-  NULL = 'null',
-  HOVER = 'hover',
-  CLICK = 'click',
-  FOUCS = 'foucs',
-  CONTEXT_MENU = 'contextmenu'
-}
\ No newline at end of file
+export type PopupTriggerT = 'hover' | 'click' | 'focus' | 'contextmenu' | 'none'
\ No newline at end of file
-- 
Gitee


From 5d9ede9ac359ed2a2b14a0ac1d3e294ece7dcc77 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sun, 1 Jan 2023 01:06:05 +0800
Subject: [PATCH 19/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0popup=E7=AE=AD=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           |  56 +++++--
 .../popup/__demo__/PopupContainer.vue         |   6 +-
 .../popup/__demo__/PopupPosition.vue          |  40 ++++-
 .../opendesign/src/components/popup/popup.ts  | 145 ++++++++++++++----
 .../src/components/popup/style/index.scss     |  36 +++++
 5 files changed, 231 insertions(+), 52 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 050284dc..18936047 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance } from 'vue';
+import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance, computed } from 'vue';
 import { PopupPositionT, PopupTriggerT } from './types';
 import { isElement, getScrollParents } from '../_shared/dom';
 import { throttleRAF } from '../_shared/utils';
-import { calcPopupStyle, bindTrigger } from './popup';
+import { calcPopupStyle, bindTrigger, getTransformOrigin } from './popup';
 import { useResizeObserver } from '../hooks/use-resize-observer';
 import { ResizeObserver } from '../resize-observer';
 import { useIntersectionObserver } from '../hooks';
@@ -61,18 +61,30 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  anchorClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
 
 const visible = ref(false);
 let targetEl: HTMLElement | null = null;
-const isTargetInViewport = ref(!props.hideWhenTargetInvisible);
+const onlyTargetInViewport = ref(!props.hideWhenTargetInvisible);
 
 let wrapperEl: Ref<HTMLElement | null> = ref(null);
 const popWrap = ref<HTMLElement | null>(null);
-const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({ left: `${0}px`, top: `${0}px` });
+const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({ left: '0px', top: '0px' });
 const popPosition = ref(props.position);
+
+const wrapOrigin = ref<{ left: string; top: string }>({ left: '0px', top: '0px' });
+const wrapStyle = computed(() => ({
+  transformOrigin: `${wrapOrigin.value.left} ${wrapOrigin.value.top}`,
+}));
+
+const anchorStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({});
+
 // 是否在可视区域外
 const unmount = ref(true);
 
@@ -81,7 +93,7 @@ const intersctionObserver = useIntersectionObserver();
 
 // 处理popup位置
 const updatePopupStyle = () => {
-  if (props.hideWhenTargetInvisible && !isTargetInViewport.value) {
+  if (props.hideWhenTargetInvisible && !onlyTargetInViewport.value) {
     return;
   }
 
@@ -90,21 +102,34 @@ const updatePopupStyle = () => {
   }
   console.log('update style');
 
-  const { style, position } = calcPopupStyle(popWrap.value, targetEl, props.position);
+  const { popupStyle: pStyle, position, anchorStyle: aStyle } = calcPopupStyle(popWrap.value, targetEl, props.position);
+
+  wrapOrigin.value = getTransformOrigin(position);
 
-  if (style) {
-    popStyle.top = `${Math.round(style.top)}px`;
-    popStyle.left = `${Math.round(style.left)}px`;
+  if (pStyle) {
+    popStyle.top = `${Math.round(pStyle.top)}px`;
+    popStyle.left = `${Math.round(pStyle.left)}px`;
 
     popPosition.value = position;
   }
+
+  if (aStyle) {
+    Object.keys(aStyle).forEach((k) => {
+      const val = aStyle[k as keyof typeof aStyle];
+      anchorStyle[k as keyof typeof anchorStyle] = `${Math.round(val as number)}px`;
+    });
+  }
 };
 
 const onTargetInterscting: IntersectionListenerT = (entry: IntersectionObserverEntry) => {
-  isTargetInViewport.value = entry.isIntersecting;
+  onlyTargetInViewport.value = entry.isIntersecting;
+  console.log('onlyTargetInViewport.value', onlyTargetInViewport.value, entry.intersectionRatio, entry.target);
+
   if (entry.isIntersecting) {
     if (visible.value) {
-      updatePopupStyle();
+      nextTick(() => {
+        updatePopupStyle();
+      });
     }
   }
 };
@@ -133,7 +158,6 @@ const clearVisibleTimer = () => {
 };
 
 // 更新可见状态，支持延迟更新
-// let visibleTo = visible.value;
 const updateVisible = (isVisible: boolean, delay?: number) => {
   if (isVisible === visible.value && visibleTimer === 0) {
     return;
@@ -247,6 +271,7 @@ watch(popWrap, (popEl) => {
     if (targetEl) {
       resizeObserver.removeListener(targetEl, onResize);
       intersctionObserver.removeListener(targetEl, onTargetInterscting);
+      onlyTargetInViewport.value = true;
     }
   }
 });
@@ -288,10 +313,13 @@ onUnmounted(() => {
 <template>
   <teleport v-if="!unmount || visible" :to="props.wrapper">
     <ResizeObserver @resize="onPopupResize">
-      <div ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs" :class="{ hide: !isTargetInViewport }">
+      <div ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs" :class="{ hide: !onlyTargetInViewport }">
         <Transition name="o-zoom-fade" :appear="true" @after-leave="handleTransitionEnd">
-          <div v-if="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]">
+          <div v-if="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]" :style="wrapStyle">
             <slot></slot>
+            <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
+              <slot name="anchor"></slot>
+            </div>
           </div>
         </Transition>
       </div>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index ad7b3ccb..7e88402e 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -34,7 +34,7 @@ setTimeout(() => {
       <OButton ref="btn6" class="btn6">TL btn6 </OButton>
       <OButton ref="btn7" class="btn7">LEFT btn7 </OButton>
       <OButton ref="btn8" class="btn8">BL btn8 </OButton>
-      <OButton ref="btn9" class="btn9">TL btn9 </OButton>
+      <OButton ref="btn9" class="btn9">LT btn9 </OButton>
 
       <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click">
         <div class="popup-box">
@@ -48,7 +48,7 @@ setTimeout(() => {
           <div>{{ content }}</div>
         </div>
       </OPopup>
-      <OPopup v-model:visible="visible" position="lt" :target="btn3" wrapper="#wrap" trigger="click">
+      <OPopup v-model:visible="visible" position="tl" :target="btn3" wrapper="#wrap" trigger="click">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
@@ -113,7 +113,7 @@ setTimeout(() => {
 }
 .content {
   height: 50vh;
-  width: 60vw;
+  width: 80vw;
 
   position: relative;
   :deep(.o-btn) {
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
index a069a80b..3c80f817 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupPosition.vue
@@ -23,30 +23,30 @@ const btn12 = ref(null);
   <div class="position-wrap">
     <div class="top">
       <OButton ref="btn1"> TL </OButton>
-      <OPopup position="tl" :target="btn1">
+      <OPopup anchor-class="popup-arrow" position="tl" :target="btn1">
         <div class="popup-box">TL {{ content }}</div>
       </OPopup>
       <OButton ref="btn2"> TOP </OButton>
-      <OPopup position="top" :target="btn2" trigger="click">
+      <OPopup anchor-class="popup-arrow" position="top" :target="btn2" :trigger="['click', 'hover']">
         <div class="popup-box">T {{ content }}</div>
       </OPopup>
       <OButton ref="btn3">TR</OButton>
-      <OPopup position="tr" :target="btn3">
+      <OPopup anchor-class="popup-arrow" position="tr" :target="btn3">
         <div class="popup-box">TR {{ content }}</div>
       </OPopup>
     </div>
     <div class="middle">
       <div class="left">
         <OButton ref="btn4"> LT </OButton>
-        <OPopup position="lt" :target="btn4">
+        <OPopup anchor-class="popup-arrow" position="lt" :target="btn4">
           <div class="popup-box">LT {{ content }}</div>
         </OPopup>
         <OButton ref="btn5"> LEFT </OButton>
-        <OPopup position="left" :target="btn5">
+        <OPopup anchor-class="popup-arrow" position="left" :target="btn5">
           <div class="popup-box">L {{ content }}</div>
         </OPopup>
         <OButton ref="btn6"> LB </OButton>
-        <OPopup position="lb" :target="btn6">
+        <OPopup anchor-class="popup-arrow" position="lb" :target="btn6">
           <div class="popup-box">LB {{ content }}</div>
         </OPopup>
       </div>
@@ -54,14 +54,23 @@ const btn12 = ref(null);
         <OButton ref="btn7"> RT </OButton>
         <OPopup position="rt" :target="btn7">
           <div class="popup-box">R {{ content }}</div>
+          <template #anchor>
+            <div class="popup-arrow"></div>
+          </template>
         </OPopup>
         <OButton ref="btn8"> RIGHT </OButton>
         <OPopup position="right" :target="btn8">
           <div class="popup-box">R {{ content }}</div>
+          <template #anchor>
+            <div class="popup-arrow"></div>
+          </template>
         </OPopup>
         <OButton ref="btn9"> RB </OButton>
         <OPopup position="rb" :target="btn9">
           <div class="popup-box">RB {{ content }}</div>
+          <template #anchor>
+            <div class="popup-arrow"></div>
+          </template>
         </OPopup>
       </div>
     </div>
@@ -69,14 +78,23 @@ const btn12 = ref(null);
       <OButton ref="btn10"> BL </OButton>
       <OPopup position="bl" :target="btn10">
         <div class="popup-box">BL {{ content }}</div>
+        <template #anchor>
+          <div class="popup-arrow"></div>
+        </template>
       </OPopup>
       <OButton ref="btn11"> BOTTOM </OButton>
-      <OPopup position="bottom" :target="btn11" trigger="click">
+      <OPopup position="bottom" :target="btn11">
         <div class="popup-box">B {{ content }}</div>
+        <template #anchor>
+          <div class="popup-arrow"></div>
+        </template>
       </OPopup>
       <OButton ref="btn12"> BR </OButton>
       <OPopup position="br" :target="btn12">
         <div class="popup-box">BR {{ content }}</div>
+        <template #anchor>
+          <div class="popup-arrow"></div>
+        </template>
       </OPopup>
     </div>
   </div>
@@ -116,3 +134,11 @@ const btn12 = ref(null);
   justify-content: space-between;
 }
 </style>
+<style lang="scss">
+.popup-arrow {
+  border: 1px solid red;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+}
+</style>
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index 90afad80..8f708e76 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -14,6 +14,13 @@ interface DomContentRect {
   bottom: number,
 }
 
+interface AnchorPosition {
+  left?: number,
+  top?: number,
+  right?: number,
+  bottom?: number
+}
+
 type ElementSize = ReturnType<typeof getElementSize>
 
 // 获取wrapper content box范围，因为绝对定位需要排除border
@@ -87,12 +94,12 @@ function getPopupViewOffset(position: PopupPositionT, t: DOMRect, p: DOMRect): P
 }
 
 // 根据视窗与相对容器，返回popup的位置范围
-function getWrapperViewEdge(pSize: ElementSize, wrapperRect?: DomContentRect) {
+function getWrapperViewEdge(popupSize: ElementSize, wrapperRect?: DomContentRect) {
   const viewport = {
     left: 0,
-    right: window.innerWidth - pSize.width,
+    right: window.innerWidth - popupSize.width,
     top: 0,
-    bottom: window.innerHeight - pSize.height
+    bottom: window.innerHeight - popupSize.height
   };
 
   if (!wrapperRect) {
@@ -101,20 +108,20 @@ function getWrapperViewEdge(pSize: ElementSize, wrapperRect?: DomContentRect) {
   return {
     left: Math.max(viewport.left, wrapperRect.left),
     top: Math.max(viewport.top, wrapperRect.top),
-    right: Math.min(viewport.right, wrapperRect.right - pSize.width),
-    bottom: Math.min(viewport.bottom, wrapperRect.bottom - pSize.height),
+    right: Math.min(viewport.right, wrapperRect.right - popupSize.width),
+    bottom: Math.min(viewport.bottom, wrapperRect.bottom - popupSize.height),
   };
 }
 
-// 根据视窗与相对容器，返回popup的位置范围
-function getPopupEdge(pSize: ElementSize, targetRect: DOMRect) {
+// 根据触发元素，返回popup的位置范围
+function getPopupEdge(popupSize: ElementSize, targetRect: DOMRect, anchorOffset: number = 0) {
   const { left, right, top, bottom } = targetRect;
-  const { width, height } = pSize;
+  const { width, height } = popupSize;
   return {
-    left: left - width,
-    top: top - height,
-    right: right + width,
-    bottom: bottom + height
+    left: left - width + anchorOffset,
+    top: top - height + anchorOffset,
+    right: right - anchorOffset,
+    bottom: bottom - anchorOffset
   };
 }
 
@@ -208,12 +215,20 @@ function adjustPosition(position: PopupPositionT, direction: DirectionT) {
 }
 
 // 根据popup的极值调整
-function adjustOffset(position: PopupPositionT, pPosition: Pos, pSize: ElementSize, pRect: DOMRect, tRect: DOMRect, wRect?: DomContentRect) {
-  const { top, left } = pPosition;
-  const edge = getWrapperViewEdge(pSize, wRect);
+function adjustOffset(
+  position: PopupPositionT,
+  popupPosition: Pos,
+  popupSize: ElementSize,
+  pRect: DOMRect,
+  tRect: DOMRect,
+  wRect?: DomContentRect,
+  anchorOffset?: number
+) {
+  const { top, left } = popupPosition;
+  const edge = getWrapperViewEdge(popupSize, wRect);
 
   let fixedPosition = position;
-  let style = pPosition;
+  let style = popupPosition;
 
   const d = getDirection(position);
   if (d === 'top') {
@@ -238,7 +253,7 @@ function adjustOffset(position: PopupPositionT, pPosition: Pos, pSize: ElementSi
     }
   }
 
-  const popEdge = getPopupEdge(pSize, tRect);
+  const popEdge = getPopupEdge(popupSize, tRect, anchorOffset);
 
   if (['top', 'bottom'].includes(d)) {
     if (edge.left > left) {
@@ -257,26 +272,76 @@ function adjustOffset(position: PopupPositionT, pPosition: Pos, pSize: ElementSi
 
   return {
     position: fixedPosition,
-    style,
+    popupStyle: style,
   };
 }
 
+function getAnchorOffset(position: PopupPositionT, tRect: DOMRect, popupStyle: Pos, popupSize: ElementSize): AnchorPosition {
+  const pos: AnchorPosition = {};
+  const limit = 8;
+
+  const { left: pl, top: pt } = popupStyle;
+  if (['top', 'tl', 'tr', 'bottom', 'bl', 'br'].includes(position)) {
+    let l = tRect.left + (tRect.width / 2) - pl;
+
+    if (l > popupSize.width - limit) {
+      l = popupSize.width - limit;
+    } else if (l < limit) {
+      l = limit;
+    }
+
+    pos.left = l;
+
+    if (['top', 'tl', 'tr'].includes(position)) {
+      pos.bottom = 0;
+    } else {
+      pos.top = 0;
+    }
+  } else if (['left', 'lt', 'lb', 'right', 'rt', 'rb'].includes(position)) {
+    let t = tRect.top + (tRect.height / 2) - pt;
+
+    if (t > popupSize.height - limit) {
+      t = popupSize.height - limit;
+    } else if (t < limit) {
+      t = limit;
+    }
+
+    pos.top = t;
+
+    if (['left', 'lt', 'lb'].includes(position)) {
+      pos.right = 0;
+    } else {
+      pos.left = 0;
+    }
+  }
+
+
+  return pos;
+}
+
 // 处理popup位置
 export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, position: PopupPositionT,
-  { adaptive = true }: { adaptive?: boolean } = {}) {
+  {
+    adaptive = true, anchorOffset = 8
+  }: {
+    adaptive?: boolean, anchorOffset?: number
+  } = {}) {
 
   const tRect = targetEl.getBoundingClientRect();
 
   const pRect = popupEl.getBoundingClientRect();
-  const pSize = getElementSize(popupEl);
+  const popupSize = getElementSize(popupEl);
 
   // 根据position计算popup相对视窗的位置
-  let style = getPopupViewOffset(position, tRect, pRect);
+  let popupStyle = getPopupViewOffset(position, tRect, pRect);
+  let anchorStyle: AnchorPosition = {};
 
   const wrapperEl = getOffsetElement(popupEl) as HTMLElement;
   if (!wrapperEl) {
     return {
-      isOutside: true
+      popupStyle,
+      position,
+      anchorStyle
     };
   }
   const wrapperRect = wrapperEl.getBoundingClientRect();
@@ -290,16 +355,19 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
   let fixedPosition = position;
   // 自适应容器边缘
   if (adaptive) {
-    const rlt = adjustOffset(position, style, pSize, pRect, tRect, wrapperContentRect);
+    const rlt = adjustOffset(position, popupStyle, popupSize, pRect, tRect, wrapperContentRect, anchorOffset);
     fixedPosition = rlt.position;
-    style = rlt.style;
+    popupStyle = rlt.popupStyle;
   }
-
-  style = getPopupWrapOffset(style, wrapperEl, wrapperContentRect);
+  // 获取锚点相对popup的位置
+  anchorStyle = getAnchorOffset(fixedPosition, tRect, popupStyle, popupSize);
+  // 计算相对容器的位置
+  popupStyle = getPopupWrapOffset(popupStyle, wrapperEl, wrapperContentRect);
 
   return {
-    style,
     position: fixedPosition,
+    popupStyle,
+    anchorStyle
   };
 };
 
@@ -386,4 +454,25 @@ export function bindTrigger(
   });
 
   return listeners;
-};
\ No newline at end of file
+};
+
+export function getTransformOrigin(position: PopupPositionT) {
+  let left = '0px';
+  let top = '0px';
+  if (['lt', 'lb', 'left', 'tr', 'br'].includes(position)) {
+    left = '100%';
+  } else if (['top', 'bottom'].includes(position)) {
+    left = '50%';
+  }
+
+  if (['tl', 'tr', 'top', 'lb', 'rb'].includes(position)) {
+    top = '100%';
+  } else if (['left', 'right'].includes(position)) {
+    top = '50%';
+  }
+
+  return {
+    top,
+    left,
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index 916ec2c7..beccf6a9 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -11,3 +11,39 @@
     pointer-events: none;
   }
 }
+
+.o-popup-anchor {
+  position: absolute;
+}
+
+.o-popup-pos-left,
+.o-popup-pos-lb,
+.o-popup-pos-lt {
+  .o-popup-anchor {
+    transform: translate(50%, -50%);
+  }
+}
+
+.o-popup-pos-top,
+.o-popup-pos-tl,
+.o-popup-pos-tr {
+  .o-popup-anchor {
+    transform: translate(-50%, 50%);
+  }
+}
+
+.o-popup-pos-right,
+.o-popup-pos-rt,
+.o-popup-pos-rb {
+  .o-popup-anchor {
+    transform: translate(-50%, -50%);
+  }
+}
+
+.o-popup-pos-bottom,
+.o-popup-pos-bl,
+.o-popup-pos-br {
+  .o-popup-anchor {
+    transform: translate(-50%, -50%);
+  }
+}
-- 
Gitee


From 2ceb2c60d408252866302fba8caf9291eba882c7 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sun, 1 Jan 2023 23:53:46 +0800
Subject: [PATCH 20/28] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=A7=86=E7=AA=97?=
 =?UTF-8?q?=E5=A4=96=E7=9A=84=E6=98=BE=E7=A4=BApopup=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0unmountOnClose=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popover/__demo__/PopoverPosition.vue      | 54 ++++++++---
 .../src/components/popup/OPopup.vue           | 93 ++++++++++++-------
 .../popup/__demo__/PopupContainer.vue         |  4 +-
 .../src/components/popup/style/index.scss     |  2 +-
 packages/portal/src/pages/ThePopover.vue      | 12 +++
 packages/portal/src/pages/ThePopup.vue        |  2 +-
 packages/portal/src/router.ts                 |  8 +-
 7 files changed, 122 insertions(+), 53 deletions(-)
 create mode 100644 packages/portal/src/pages/ThePopover.vue

diff --git a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
index fbd9ede6..fbec7806 100644
--- a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
+++ b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
@@ -23,37 +23,61 @@ const btn12 = ref(null);
   <div class="position-wrap">
     <div class="top">
       <OButton ref="btn1"> TL </OButton>
-      <OPopover position="tl" :target="btn1">TL {{ content }} </OPopover>
+      <OPopover position="tl" :target="btn1">
+        <div class="box">TL {{ content }}</div>
+      </OPopover>
       <OButton ref="btn2"> TOP </OButton>
-      <OPopover position="top" :target="btn2" trigger="click">T {{ content }} </OPopover>
+      <OPopover position="top" :target="btn2">
+        <div class="box">T {{ content }}</div>
+      </OPopover>
       <OButton ref="btn3">TR</OButton>
-      <OPopover position="tr" :target="btn3">TR {{ content }} </OPopover>
+      <OPopover position="tr" :target="btn3">
+        <div class="box">TR {{ content }}</div>
+      </OPopover>
     </div>
     <div class="middle">
       <div class="left">
         <OButton ref="btn4"> LT </OButton>
-        <OPopover position="lt" :target="btn4">LT {{ content }} </OPopover>
+        <OPopover position="lt" :target="btn4">
+          <div class="box">LT {{ content }}</div>
+        </OPopover>
         <OButton ref="btn5"> LEFT </OButton>
-        <OPopover position="left" :target="btn5">L {{ content }} </OPopover>
+        <OPopover position="left" :target="btn5">
+          <div class="box">L {{ content }}</div>
+        </OPopover>
         <OButton ref="btn6"> LB </OButton>
-        <OPopover position="lb" :target="btn6">LB {{ content }} </OPopover>
+        <OPopover position="lb" :target="btn6">
+          <div class="box">LB {{ content }}</div>
+        </OPopover>
       </div>
       <div class="right">
         <OButton ref="btn7"> RT </OButton>
-        <OPopover position="rt" :target="btn7">R {{ content }} </OPopover>
+        <OPopover position="rt" :target="btn7">
+          <div class="box">R {{ content }}</div>
+        </OPopover>
         <OButton ref="btn8"> RIGHT </OButton>
-        <OPopover position="right" :target="btn8">R {{ content }} </OPopover>
+        <OPopover position="right" :target="btn8">
+          <div class="box">R {{ content }}</div>
+        </OPopover>
         <OButton ref="btn9"> RB </OButton>
-        <OPopover position="rb" :target="btn9">RB {{ content }} </OPopover>
+        <OPopover position="rb" :target="btn9">
+          <div class="box">RB {{ content }}</div>
+        </OPopover>
       </div>
     </div>
     <div class="bottom">
       <OButton ref="btn10"> BL </OButton>
-      <OPopover position="bl" :target="btn10">BL {{ content }} </OPopover>
+      <OPopover position="bl" :target="btn10">
+        <div class="box">BL {{ content }}</div>
+      </OPopover>
       <OButton ref="btn11"> BOTTOM </OButton>
-      <OPopover position="bottom" :target="btn11" trigger="click">B {{ content }} </OPopover>
+      <OPopover position="bottom" :target="btn11">
+        <div class="box">B {{ content }}</div>
+      </OPopover>
       <OButton ref="btn12"> BR </OButton>
-      <OPopover position="br" :target="btn12">BR {{ content }} </OPopover>
+      <OPopover position="br" :target="btn12">
+        <div class="box">BR {{ content }}</div>
+      </OPopover>
     </div>
   </div>
 </template>
@@ -64,6 +88,12 @@ const btn12 = ref(null);
   overflow: auto;
   border: 1px solid #333;
 }
+.box {
+  padding: 12px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
 .top {
   display: flex;
   justify-content: space-between;
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 18936047..cd52169e 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -65,16 +65,21 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  unmountOnClose: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
 
 const visible = ref(false);
 let targetEl: HTMLElement | null = null;
-const onlyTargetInViewport = ref(!props.hideWhenTargetInvisible);
+// 默认为true，避免props.visible为初始值为true时，无法计算popup位置
+const isTargetInViewport = ref(true);
 
 let wrapperEl: Ref<HTMLElement | null> = ref(null);
-const popWrap = ref<HTMLElement | null>(null);
+const popupEl = ref<HTMLElement | null>(null);
 const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({ left: '0px', top: '0px' });
 const popPosition = ref(props.position);
 
@@ -86,26 +91,25 @@ const wrapStyle = computed(() => ({
 const anchorStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({});
 
 // 是否在可视区域外
-const unmount = ref(true);
+const mounted = ref(false);
 
 const resizeObserver = useResizeObserver();
 const intersctionObserver = useIntersectionObserver();
 
 // 处理popup位置
 const updatePopupStyle = () => {
-  if (props.hideWhenTargetInvisible && !onlyTargetInViewport.value) {
+  if (props.hideWhenTargetInvisible && !isTargetInViewport.value) {
     return;
   }
 
-  if (!targetEl || !popWrap.value || !wrapperEl.value) {
+  if (!targetEl || !popupEl.value || !wrapperEl.value) {
     return;
   }
-  console.log('update style');
+  console.log('calc popup position...');
 
-  const { popupStyle: pStyle, position, anchorStyle: aStyle } = calcPopupStyle(popWrap.value, targetEl, props.position);
+  const { popupStyle: pStyle, position, anchorStyle: aStyle } = calcPopupStyle(popupEl.value, targetEl, props.position);
 
   wrapOrigin.value = getTransformOrigin(position);
-
   if (pStyle) {
     popStyle.top = `${Math.round(pStyle.top)}px`;
     popStyle.left = `${Math.round(pStyle.left)}px`;
@@ -121,17 +125,19 @@ const updatePopupStyle = () => {
   }
 };
 
+// 定义变量，避免首次监听与popup默认显示时重复计算
+let oldIntersecting: boolean | null = null;
 const onTargetInterscting: IntersectionListenerT = (entry: IntersectionObserverEntry) => {
-  onlyTargetInViewport.value = entry.isIntersecting;
-  console.log('onlyTargetInViewport.value', onlyTargetInViewport.value, entry.intersectionRatio, entry.target);
+  isTargetInViewport.value = entry.isIntersecting;
 
-  if (entry.isIntersecting) {
+  if (oldIntersecting !== null && entry.isIntersecting) {
     if (visible.value) {
       nextTick(() => {
         updatePopupStyle();
       });
     }
   }
+  oldIntersecting = isTargetInViewport.value;
 };
 
 watch(
@@ -167,13 +173,15 @@ const updateVisible = (isVisible: boolean, delay?: number) => {
     if (visible.value === isVisible) {
       return;
     }
+    // 设置popup是否显示，不需要手动触发计算位置，显示时会触发resize，计算位置
     visible.value = isVisible;
     emits('update:visible', isVisible);
     if (isVisible) {
-      unmount.value = false;
-      nextTick(() => {
-        updatePopupStyle();
-      });
+      mounted.value = true;
+
+      if (props.hideWhenTargetInvisible && targetEl) {
+        intersctionObserver.addListener(targetEl, onTargetInterscting);
+      }
     }
   };
 
@@ -217,13 +225,16 @@ const onResize = (en: ResizeObserverEntry, isFirst: boolean) => {
     updatePopupStyle();
   }
 };
-const onPopupResize = (en: ResizeObserverEntry, isFirst: boolean) => {
-  return onResize(en, props.hideWhenTargetInvisible ? isFirst : false);
+/**
+ * popup
+ */
+const onPopupResize = (en: ResizeObserverEntry) => {
+  return onResize(en, false);
 };
 
 const handleTransitionEnd = () => {
-  if (!visible.value) {
-    unmount.value = true;
+  if (!visible.value && props.unmountOnClose) {
+    mounted.value = false;
   }
 };
 
@@ -239,9 +250,13 @@ const listenScroll = (el: HTMLElement) => {
     el.removeEventListener('scroll', scrollListener);
   };
 };
-watch(popWrap, (popEl) => {
+watch(popupEl, (popEl) => {
   let handles: Array<() => void> = [];
   if (popEl) {
+    /**
+     * popup显示时，监听挂载容器、关联元素
+     */
+
     if (targetEl) {
       // 监听targetEl父组件滚动
       const scrollers = getScrollParents(targetEl);
@@ -252,18 +267,16 @@ watch(popWrap, (popEl) => {
       // 监听targetEL尺寸变化
       resizeObserver.addListener(targetEl, onResize);
     }
-    if (!wrapperEl.value) {
-      if (typeof props.wrapper === 'string') {
-        wrapperEl.value = document.querySelector(props.wrapper);
-      } else {
-        wrapperEl.value = props.wrapper;
-      }
-    }
+
     if (wrapperEl.value) {
       // 监听warpper尺寸变化
       resizeObserver.addListener(wrapperEl.value, onResize);
     }
   } else {
+    /**
+     * popup隐藏时，销毁事件监听
+     */
+
     handles.forEach((hl) => hl());
     if (wrapperEl.value) {
       resizeObserver.removeListener(wrapperEl.value, onResize);
@@ -271,7 +284,7 @@ watch(popWrap, (popEl) => {
     if (targetEl) {
       resizeObserver.removeListener(targetEl, onResize);
       intersctionObserver.removeListener(targetEl, onTargetInterscting);
-      onlyTargetInViewport.value = true;
+      isTargetInViewport.value = true;
     }
   }
 });
@@ -282,6 +295,14 @@ onMounted(() => {
 
   // 触发元素为dom或者选择器，处理事件触发
   nextTick(() => {
+    if (!wrapperEl.value) {
+      if (typeof props.wrapper === 'string') {
+        wrapperEl.value = document.querySelector(props.wrapper);
+      } else {
+        wrapperEl.value = props.wrapper;
+      }
+    }
+
     // 绑定触发元素事件
     if (typeof props.target === 'string') {
       bindTargetEvent(document.querySelector(props.target));
@@ -289,10 +310,10 @@ onMounted(() => {
       bindTargetEvent(props.target as HTMLElement);
     }
 
-    // // 初始为true时，更新样式
-    if (visible.value) {
-      updatePopupStyle();
-    }
+    // 初始为true时，更新样式
+    // if (visible.value) {
+    //   updatePopupStyle();
+    // }
   });
 });
 
@@ -311,11 +332,11 @@ onUnmounted(() => {
 });
 </script>
 <template>
-  <teleport v-if="!unmount || visible" :to="props.wrapper">
-    <ResizeObserver @resize="onPopupResize">
-      <div ref="popWrap" class="o-popup" :style="popStyle" v-bind="$attrs" :class="{ hide: !onlyTargetInViewport }">
+  <teleport v-if="wrapperEl" :to="props.wrapper">
+    <ResizeObserver v-if="mounted || visible" @resize="onPopupResize">
+      <div ref="popupEl" class="o-popup" :style="popStyle" v-bind="$attrs" :class="{ 'out-view': props.hideWhenTargetInvisible && !isTargetInViewport }">
         <Transition name="o-zoom-fade" :appear="true" @after-leave="handleTransitionEnd">
-          <div v-if="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]" :style="wrapStyle">
+          <div v-show="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]" :style="wrapStyle">
             <slot></slot>
             <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
               <slot name="anchor"></slot>
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index 7e88402e..52f68bd8 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -36,7 +36,7 @@ setTimeout(() => {
       <OButton ref="btn8" class="btn8">BL btn8 </OButton>
       <OButton ref="btn9" class="btn9">LT btn9 </OButton>
 
-      <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click">
+      <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click" :unmount-on-close="false">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
@@ -132,7 +132,7 @@ setTimeout(() => {
   top: 0;
 }
 .btn3 {
-  right: 0;
+  left: 60%;
   top: 0;
 }
 .btn4 {
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index beccf6a9..d9c0cc55 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -6,7 +6,7 @@
   pointer-events: none;
   opacity: 1;
   transition: opacity var(--o-transition-duration-3);
-  &.hide {
+  &.out-view {
     opacity: 0;
     pointer-events: none;
   }
diff --git a/packages/portal/src/pages/ThePopover.vue b/packages/portal/src/pages/ThePopover.vue
new file mode 100644
index 00000000..a16f012b
--- /dev/null
+++ b/packages/portal/src/pages/ThePopover.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import '@opensig/opendesign/src/components/popup/style';
+import '@opensig/opendesign/src/components/popover/style';
+
+import PopoverPosition from '@demo/popover/__demo__/PopoverPosition.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <PopoverPosition />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/pages/ThePopup.vue b/packages/portal/src/pages/ThePopup.vue
index 6ed5fe6a..900d72c4 100644
--- a/packages/portal/src/pages/ThePopup.vue
+++ b/packages/portal/src/pages/ThePopup.vue
@@ -9,7 +9,7 @@ import PopupContainer from '@demo/popup/__demo__/PopupContainer.vue';
   <div class="page-demo">
     <PopupContainer />
     <PopupPosition />
-    <!-- <PopupVisible /> -->
+    <PopupVisible />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 77f624ff..c7ab0998 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -35,9 +35,15 @@ export const routes = [
   {
     path: '/popup',
     name: 'Popup',
-    label: '浮层',
+    label: '弹层',
     component: () => import('./pages/ThePopup.vue'),
   },
+  {
+    path: '/popover',
+    name: 'Popover',
+    label: '弹出框',
+    component: () => import('./pages/ThePopover.vue'),
+  },
   {
     path: '/select',
     name: 'Select',
-- 
Gitee


From e4f178cce7989084c01dba757101eb02fefbc7c9 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 11:29:43 +0800
Subject: [PATCH 21/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0popup=20hover=E6=88=96c?=
 =?UTF-8?q?lick=E6=97=B6=E4=B8=8D=E9=9A=90=E8=97=8F=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96outclick?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/directves/click-outside.ts | 43 +--------------
 .../src/components/hooks/use-out-click.ts     | 54 ++++++++++++++++++
 .../src/components/popup/OPopup.vue           | 55 +++++++++++++++----
 .../opendesign/src/components/popup/popup.ts  | 14 ++++-
 .../src/components/popup/style/index.scss     |  4 +-
 5 files changed, 114 insertions(+), 56 deletions(-)
 create mode 100644 packages/opendesign/src/components/hooks/use-out-click.ts

diff --git a/packages/opendesign/src/components/directves/click-outside.ts b/packages/opendesign/src/components/directves/click-outside.ts
index c12824e7..7c59e960 100644
--- a/packages/opendesign/src/components/directves/click-outside.ts
+++ b/packages/opendesign/src/components/directves/click-outside.ts
@@ -1,38 +1,7 @@
 import { ObjectDirective, DirectiveBinding } from 'vue';
-interface handlerItemT {
-  handler: () => void
-}
+import { useOutClick } from '../hooks/use-out-click';
 
-const elList = new Map<HTMLElement, Array<handlerItemT>>();
-
-window.addEventListener('mousedown', (e) => {
-  elList.forEach((handlers, el) => {
-    if (!el.contains(e.target as HTMLElement)) {
-
-      handlers.forEach(item => {
-        item.handler();
-      });
-    }
-  });
-});
-
-function addListener(el: HTMLElement, fn: () => void) {
-  if (!elList.has(el)) {
-    elList.set(el, []);
-  }
-
-  const handlers = elList.get(el);
-  if (handlers) {
-    handlers.push({
-      handler: fn
-    });
-  }
-}
-
-function removeListener(el: HTMLElement) {
-  elList.delete(el);
-
-}
+const { addListener, removeListener } = useOutClick();
 
 const vOutClick: ObjectDirective = {
   beforeMount(el: HTMLElement, binding: DirectiveBinding) {
@@ -43,14 +12,6 @@ const vOutClick: ObjectDirective = {
   }
 };
 
-export function listenOutClick(el: HTMLElement, fn: () => void) {
-  addListener(el, fn);
-  return () => {
-    removeListener(el);
-  };
-}
-
-
 export {
   vOutClick
 };
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-out-click.ts b/packages/opendesign/src/components/hooks/use-out-click.ts
new file mode 100644
index 00000000..b5ffde06
--- /dev/null
+++ b/packages/opendesign/src/components/hooks/use-out-click.ts
@@ -0,0 +1,54 @@
+interface handlerItemT {
+  handler: () => void,
+  exception?: (e: MouseEvent) => boolean
+}
+
+const elList = new Map<HTMLElement, Array<handlerItemT>>();
+
+window.addEventListener('mousedown', (e) => {
+  elList.forEach((handlers, el) => {
+    if (!el.contains(e.target as HTMLElement)) {
+      handlers.forEach(item => {
+        if (!item.exception || !item.exception(e)) {
+          item.handler();
+        }
+      });
+    }
+  });
+});
+
+function addListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent) => boolean) {
+  if (!elList.has(el)) {
+    elList.set(el, []);
+  }
+
+  const handlers = elList.get(el);
+  if (handlers) {
+    handlers.push({
+      handler: fn,
+      exception: exception
+    });
+  }
+}
+
+function removeListener(el: HTMLElement, listener?: () => void) {
+  if (listener) {
+    const handlers = elList.get(el);
+    if (!handlers) {
+      return;
+    }
+    const idx = handlers.findIndex(item => item.handler === listener);
+    if (idx > -1) {
+      handlers.splice(idx, 1);
+    }
+  } else {
+    elList.delete(el);
+  }
+}
+
+export function useOutClick() {
+  return {
+    addListener,
+    removeListener,
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index cd52169e..7b228c2d 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -69,9 +69,14 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  statyOnHoverin: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
+const triggers = Array.isArray(props.trigger) ? props.trigger : [props.trigger];
 
 const visible = ref(false);
 let targetEl: HTMLElement | null = null;
@@ -79,7 +84,7 @@ let targetEl: HTMLElement | null = null;
 const isTargetInViewport = ref(true);
 
 let wrapperEl: Ref<HTMLElement | null> = ref(null);
-const popupEl = ref<HTMLElement | null>(null);
+const popupRef = ref<HTMLElement | null>(null);
 const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({ left: '0px', top: '0px' });
 const popPosition = ref(props.position);
 
@@ -90,8 +95,9 @@ const wrapStyle = computed(() => ({
 
 const anchorStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({});
 
-// 是否在可视区域外
+// 是否需要挂载
 const mounted = ref(false);
+const isAnimating = ref(false);
 
 const resizeObserver = useResizeObserver();
 const intersctionObserver = useIntersectionObserver();
@@ -102,12 +108,12 @@ const updatePopupStyle = () => {
     return;
   }
 
-  if (!targetEl || !popupEl.value || !wrapperEl.value) {
+  if (!targetEl || !popupRef.value || !wrapperEl.value) {
     return;
   }
   console.log('calc popup position...');
 
-  const { popupStyle: pStyle, position, anchorStyle: aStyle } = calcPopupStyle(popupEl.value, targetEl, props.position);
+  const { popupStyle: pStyle, position, anchorStyle: aStyle } = calcPopupStyle(popupRef.value, targetEl, props.position);
 
   wrapOrigin.value = getTransformOrigin(position);
   if (pStyle) {
@@ -200,8 +206,7 @@ const bindTargetEvent = (el: HTMLElement | null) => {
   }
   targetEl = el;
 
-  const triggers = Array.isArray(props.trigger) ? props.trigger : [props.trigger];
-  triggerListener = bindTrigger(el, triggers, {
+  triggerListener = bindTrigger(el, popupRef, triggers, {
     updateFn: updateVisible,
     hoverDelay: props.hoverDelay,
   });
@@ -231,8 +236,11 @@ const onResize = (en: ResizeObserverEntry, isFirst: boolean) => {
 const onPopupResize = (en: ResizeObserverEntry) => {
   return onResize(en, false);
 };
-
+const handleTransitionStart = () => {
+  isAnimating.value = true;
+};
 const handleTransitionEnd = () => {
+  isAnimating.value = false;
   if (!visible.value && props.unmountOnClose) {
     mounted.value = false;
   }
@@ -250,7 +258,8 @@ const listenScroll = (el: HTMLElement) => {
     el.removeEventListener('scroll', scrollListener);
   };
 };
-watch(popupEl, (popEl) => {
+
+watch(popupRef, (popEl) => {
   let handles: Array<() => void> = [];
   if (popEl) {
     /**
@@ -288,7 +297,16 @@ watch(popupEl, (popEl) => {
     }
   }
 });
-
+const onPopupHoverIn = () => {
+  if (triggers.includes('hover')) {
+    updateVisible(true, props.hoverDelay);
+  }
+};
+const onPopupHoverOut = () => {
+  if (triggers.includes('hover')) {
+    updateVisible(false, props.hoverDelay);
+  }
+};
 onMounted(() => {
   // 在mounted事件后再显示，避免找不到wrapper
   visible.value = props.visible;
@@ -334,8 +352,23 @@ onUnmounted(() => {
 <template>
   <teleport v-if="wrapperEl" :to="props.wrapper">
     <ResizeObserver v-if="mounted || visible" @resize="onPopupResize">
-      <div ref="popupEl" class="o-popup" :style="popStyle" v-bind="$attrs" :class="{ 'out-view': props.hideWhenTargetInvisible && !isTargetInViewport }">
-        <Transition name="o-zoom-fade" :appear="true" @after-leave="handleTransitionEnd">
+      <div
+        ref="popupRef"
+        class="o-popup"
+        :style="popStyle"
+        v-bind="$attrs"
+        :class="{ 'out-view': props.hideWhenTargetInvisible && !isTargetInViewport, animating: isAnimating }"
+        @mouseover="onPopupHoverIn"
+        @mouseleave="onPopupHoverOut"
+      >
+        <Transition
+          name="o-zoom-fade"
+          :appear="true"
+          @before-enter="handleTransitionStart"
+          @after-enter="handleTransitionEnd"
+          @before-leave="handleTransitionStart"
+          @after-leave="handleTransitionEnd"
+        >
           <div v-show="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]" :style="wrapStyle">
             <slot></slot>
             <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index 8f708e76..a966e4d8 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -1,8 +1,11 @@
+import { Ref } from 'vue';
 import { getElementBorder, getElementSize, getOffsetElement, getScroll } from '../_shared/dom';
 import type { DirectionT } from '../_shared/dom';
 import type { PopupPositionT, PopupTriggerT } from './types';
-import { listenOutClick } from '../directves';
 
+import { useOutClick } from '../hooks/use-out-click';
+
+const { addListener, removeListener } = useOutClick();
 interface Pos {
   left: number,
   top: number
@@ -374,6 +377,7 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
 // 监听元素的触发事件
 export function bindTrigger(
   el: HTMLElement | null,
+  popupRef: Ref<HTMLElement | null>,
   triggers: PopupTriggerT[],
   {
     updateFn,
@@ -416,12 +420,16 @@ export function bindTrigger(
     click: () => {
       el?.addEventListener('click', showFn);
 
-      const removeFn = listenOutClick(el, hideFn);
+      addListener(el, hideFn, (e: MouseEvent) => {
+        return !!popupRef.value?.contains(e.target as HTMLElement);
+      });
 
       listeners.push(() => {
         el?.removeEventListener('click', showFn);
       });
-      listeners.push(removeFn);
+      listeners.push(() => {
+        removeListener(el, hideFn);
+      });
     },
     focus: () => {
       el?.addEventListener('focusin', showFn);
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index d9c0cc55..35d133e4 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -3,13 +3,15 @@
 .o-popup {
   position: absolute;
   z-index: 100;
-  pointer-events: none;
   opacity: 1;
   transition: opacity var(--o-transition-duration-3);
   &.out-view {
     opacity: 0;
     pointer-events: none;
   }
+  &.animating {
+    pointer-events: none;
+  }
 }
 
 .o-popup-anchor {
-- 
Gitee


From 6630b1c1c02c8910caef14b82613d5e63ccb97f4 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 15:08:39 +0800
Subject: [PATCH 22/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=81=8F=E7=A7=BB?=
 =?UTF-8?q?=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           | 24 +++++++-
 .../opendesign/src/components/popup/popup.ts  | 58 ++++++++++++-------
 2 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 7b228c2d..d38ea5b9 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -1,3 +1,8 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
 <script setup lang="ts">
 import { onMounted, reactive, ref, Ref, watch, nextTick, onUnmounted, PropType, ComponentPublicInstance, computed } from 'vue';
 import { PopupPositionT, PopupTriggerT } from './types';
@@ -47,6 +52,13 @@ const props = defineProps({
     type: [String, Object] as PropType<string | HTMLElement>,
     default: document.body,
   },
+  /**
+   * 距离target偏移量
+   */
+  offset: {
+    type: Number,
+    default: 0,
+  },
   /**
    * hover事件延时触发的时间（毫秒）
    */
@@ -113,7 +125,13 @@ const updatePopupStyle = () => {
   }
   console.log('calc popup position...');
 
-  const { popupStyle: pStyle, position, anchorStyle: aStyle } = calcPopupStyle(popupRef.value, targetEl, props.position);
+  const {
+    popupStyle: pStyle,
+    position,
+    anchorStyle: aStyle,
+  } = calcPopupStyle(popupRef.value, targetEl, props.position, {
+    offset: props.offset,
+  });
 
   wrapOrigin.value = getTransformOrigin(position);
   if (pStyle) {
@@ -357,7 +375,7 @@ onUnmounted(() => {
         class="o-popup"
         :style="popStyle"
         v-bind="$attrs"
-        :class="{ 'out-view': props.hideWhenTargetInvisible && !isTargetInViewport, animating: isAnimating }"
+        :class="[`o-popup-pos-${popPosition}`, { 'out-view': props.hideWhenTargetInvisible && !isTargetInViewport, animating: isAnimating }]"
         @mouseover="onPopupHoverIn"
         @mouseleave="onPopupHoverOut"
       >
@@ -369,7 +387,7 @@ onUnmounted(() => {
           @before-leave="handleTransitionStart"
           @after-leave="handleTransitionEnd"
         >
-          <div v-show="visible" class="o-popup-wrap" :class="[`o-popup-pos-${popPosition}`]" :style="wrapStyle">
+          <div v-show="visible" class="o-popup-wrap" :style="wrapStyle">
             <slot></slot>
             <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
               <slot name="anchor"></slot>
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index a966e4d8..323a7f57 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -39,56 +39,64 @@ function getWrapperContentRect(wrapperEl: HTMLElement, wrapperRect?: DOMRect): D
 }
 
 // 根据position计算popup的位置
-function getPopupViewOffset(position: PopupPositionT, t: DOMRect, p: DOMRect): Pos {
+function getPopupViewOffset(
+  position: PopupPositionT,
+  t: DOMRect,
+  p: DOMRect,
+  {
+    offset = 0
+  }: {
+    offset?: number
+  } = {}): Pos {
   const formula: {
     [k in PopupPositionT]: { left: number, top: number }
   } = {
     top: {
       left: t.left + t.width / 2 - p.width / 2,
-      top: t.top - p.height
+      top: t.top - p.height - offset
     },
     tl: {
       left: t.left,
-      top: t.top - p.height
+      top: t.top - p.height - offset
     },
     tr: {
       left: t.right - p.width,
-      top: t.top - p.height
+      top: t.top - p.height - offset
     },
     bottom: {
       left: t.left + t.width / 2 - p.width / 2,
-      top: t.bottom
+      top: t.bottom + offset
     },
     bl: {
       left: t.left,
-      top: t.bottom
+      top: t.bottom + offset
     },
     br: {
       left: t.right - p.width,
-      top: t.bottom
+      top: t.bottom + offset
     },
     left: {
-      left: t.left - p.width,
+      left: t.left - p.width - offset,
       top: t.top + t.height / 2 - p.height / 2
     },
     lt: {
-      left: t.left - p.width,
+      left: t.left - p.width - offset,
       top: t.top
     },
     lb: {
-      left: t.left - p.width,
+      left: t.left - p.width - offset,
       top: t.bottom - p.height
     },
     right: {
-      left: t.right,
+      left: t.right + offset,
       top: t.top + t.height / 2 - p.height / 2
     },
     rt: {
-      left: t.right,
+      left: t.right + offset,
       top: t.top
     },
     rb: {
-      left: t.right,
+      left: t.right + offset,
       top: t.bottom - p.height
 
     }
@@ -225,7 +233,13 @@ function adjustOffset(
   pRect: DOMRect,
   tRect: DOMRect,
   wRect?: DomContentRect,
-  anchorOffset?: number
+  {
+    anchorOffset,
+    offset
+  }: {
+    anchorOffset?: number,
+    offset?: number
+  } = {}
 ) {
   const { top, left } = popupPosition;
   const edge = getWrapperViewEdge(popupSize, wRect);
@@ -237,22 +251,22 @@ function adjustOffset(
   if (d === 'top') {
     if (edge.top > top) {
       fixedPosition = adjustPosition(position, 'bottom');
-      style = getPopupViewOffset(fixedPosition, tRect, pRect);
+      style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset });
     }
   } else if (d === 'left') {
     if (edge.left > left) {
       fixedPosition = adjustPosition(position, 'right');
-      style = getPopupViewOffset(fixedPosition, tRect, pRect);
+      style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset });
     }
   } else if (d === 'right') {
     if (edge.right < left) {
       fixedPosition = adjustPosition(position, 'left');
-      style = getPopupViewOffset(fixedPosition, tRect, pRect);
+      style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset });
     }
   } else if (d === 'bottom') {
     if (edge.bottom < top) {
       fixedPosition = adjustPosition(position, 'top');
-      style = getPopupViewOffset(fixedPosition, tRect, pRect);
+      style = getPopupViewOffset(fixedPosition, tRect, pRect, { offset });
     }
   }
 
@@ -325,9 +339,9 @@ function getAnchorOffset(position: PopupPositionT, tRect: DOMRect, popupStyle: P
 // 处理popup位置
 export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, position: PopupPositionT,
   {
-    adaptive = true, anchorOffset = 8
+    adaptive = true, anchorOffset = 8, offset = 8
   }: {
-    adaptive?: boolean, anchorOffset?: number
+    adaptive?: boolean, anchorOffset?: number, offset?: number
   } = {}) {
 
   const tRect = targetEl.getBoundingClientRect();
@@ -336,7 +350,7 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
   const popupSize = getElementSize(popupEl);
 
   // 根据position计算popup相对视窗的位置
-  let popupStyle = getPopupViewOffset(position, tRect, pRect);
+  let popupStyle = getPopupViewOffset(position, tRect, pRect, { offset: offset });
   let anchorStyle: AnchorPosition = {};
 
   const wrapperEl = getOffsetElement(popupEl) as HTMLElement;
@@ -358,7 +372,7 @@ export function calcPopupStyle(popupEl: HTMLElement, targetEl: HTMLElement, posi
   let fixedPosition = position;
   // 自适应容器边缘
   if (adaptive) {
-    const rlt = adjustOffset(position, popupStyle, popupSize, pRect, tRect, wrapperContentRect, anchorOffset);
+    const rlt = adjustOffset(position, popupStyle, popupSize, pRect, tRect, wrapperContentRect, { offset: offset, anchorOffset });
     fixedPosition = rlt.position;
     popupStyle = rlt.popupStyle;
   }
-- 
Gitee


From 5e7a07a8a73478300478c6c94408ee9911c6626e Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 15:33:29 +0800
Subject: [PATCH 23/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0wrap=20class=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           | 18 +++++++++-
 .../src/components/popup/style/index.scss     | 33 +------------------
 2 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index d38ea5b9..f825ca3c 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -73,18 +73,34 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * 锚点自定义class
+   */
   anchorClass: {
     type: String,
     default: '',
   },
+  /**
+   * 是否在popup隐藏时unmout
+   */
   unmountOnClose: {
     type: Boolean,
     default: true,
   },
+  /**
+   * Popup在hover时是否不消失，当trigger包含hover时有效
+   */
   statyOnHoverin: {
     type: Boolean,
     default: true,
   },
+  /**
+   * popup wrap自定义class
+   */
+  wrapClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
@@ -387,7 +403,7 @@ onUnmounted(() => {
           @before-leave="handleTransitionStart"
           @after-leave="handleTransitionEnd"
         >
-          <div v-show="visible" class="o-popup-wrap" :style="wrapStyle">
+          <div v-show="visible" class="o-popup-wrap" :style="wrapStyle" :class="wrapClass">
             <slot></slot>
             <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
               <slot name="anchor"></slot>
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index 35d133e4..f9928e45 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -16,36 +16,5 @@
 
 .o-popup-anchor {
   position: absolute;
-}
-
-.o-popup-pos-left,
-.o-popup-pos-lb,
-.o-popup-pos-lt {
-  .o-popup-anchor {
-    transform: translate(50%, -50%);
-  }
-}
-
-.o-popup-pos-top,
-.o-popup-pos-tl,
-.o-popup-pos-tr {
-  .o-popup-anchor {
-    transform: translate(-50%, 50%);
-  }
-}
-
-.o-popup-pos-right,
-.o-popup-pos-rt,
-.o-popup-pos-rb {
-  .o-popup-anchor {
-    transform: translate(-50%, -50%);
-  }
-}
-
-.o-popup-pos-bottom,
-.o-popup-pos-bl,
-.o-popup-pos-br {
-  .o-popup-anchor {
-    transform: translate(-50%, -50%);
-  }
+  z-index: 1;
 }
-- 
Gitee


From 2968b63fdb1f334e0b13da9965d1094c66af653d Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 15:33:47 +0800
Subject: [PATCH 24/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0popover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popover/OPopover.vue       | 14 ++-
 .../popover/__demo__/PopoverPosition.vue      |  8 +-
 .../src/components/popover/style/index.scss   | 87 +++++++------------
 .../src/components/popover/style/var.scss     |  2 +-
 4 files changed, 47 insertions(+), 64 deletions(-)

diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
index 4dd0f405..7a249cc0 100644
--- a/packages/opendesign/src/components/popover/OPopover.vue
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -40,6 +40,14 @@ const props = defineProps({
     type: [String, Object] as PropType<string | HTMLElement>,
     default: document.body,
   },
+  unmountOnClose: {
+    type: Boolean,
+    default: true,
+  },
+  offset: {
+    type: Number,
+    default: 8,
+  },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
@@ -49,14 +57,18 @@ const updateVisible = (val: boolean) => {
 </script>
 <template>
   <OPopup
+    class="o-popover"
+    :offset="props.offset"
     :visible="props.visible"
     :position="props.position"
     :trigger="props.trigger"
     :target="props.target"
     :wrapper="props.wrapper"
+    anchor-class="o-popover-anchor"
+    :unmount-on-close="props.unmountOnClose"
     @update:visible="updateVisible"
   >
-    <div class="o-popover">
+    <div class="o-popover-wrap">
       <slot></slot>
     </div>
   </OPopup>
diff --git a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
index fbec7806..1756d6c9 100644
--- a/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
+++ b/packages/opendesign/src/components/popover/__demo__/PopoverPosition.vue
@@ -23,7 +23,7 @@ const btn12 = ref(null);
   <div class="position-wrap">
     <div class="top">
       <OButton ref="btn1"> TL </OButton>
-      <OPopover position="tl" :target="btn1">
+      <OPopover position="tl" :target="btn1" trigger="click">
         <div class="box">TL {{ content }}</div>
       </OPopover>
       <OButton ref="btn2"> TOP </OButton>
@@ -38,7 +38,7 @@ const btn12 = ref(null);
     <div class="middle">
       <div class="left">
         <OButton ref="btn4"> LT </OButton>
-        <OPopover position="lt" :target="btn4">
+        <OPopover position="lt" :target="btn4" trigger="click">
           <div class="box">LT {{ content }}</div>
         </OPopover>
         <OButton ref="btn5"> LEFT </OButton>
@@ -52,7 +52,7 @@ const btn12 = ref(null);
       </div>
       <div class="right">
         <OButton ref="btn7"> RT </OButton>
-        <OPopover position="rt" :target="btn7">
+        <OPopover position="rt" :target="btn7" trigger="click">
           <div class="box">R {{ content }}</div>
         </OPopover>
         <OButton ref="btn8"> RIGHT </OButton>
@@ -67,7 +67,7 @@ const btn12 = ref(null);
     </div>
     <div class="bottom">
       <OButton ref="btn10"> BL </OButton>
-      <OPopover position="bl" :target="btn10">
+      <OPopover position="bl" :target="btn10" trigger="click">
         <div class="box">BL {{ content }}</div>
       </OPopover>
       <OButton ref="btn11"> BOTTOM </OButton>
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss
index cab27b15..73a8e3d5 100644
--- a/packages/opendesign/src/components/popover/style/index.scss
+++ b/packages/opendesign/src/components/popover/style/index.scss
@@ -1,80 +1,51 @@
 @import './var.scss';
 
-.o-popover {
+.o-popover-wrap {
   background-color: var(--popup-bg);
   box-shadow: var(--popup-shadow);
   padding: 4px 8px;
   border-radius: var(--popup-radius);
-  // border: 1px solid red;
+  border: 1px solid var(--popup-border-color);
   min-width: 120px;
 }
-
-.o-popup-pos-bl {
-  .o-popover {
-    margin-top: var(--popup-gap);
-  }
-}
-.o-popup-pos-bottom {
-  .o-popover {
-    margin-top: var(--popup-gap);
-  }
-}
-.o-popup-pos-br {
-  .o-popover {
-    margin-top: var(--popup-gap);
-  }
-}
-
-.o-popup-pos-tl {
-  .o-popover {
-    margin-bottom: var(--popup-gap);
-  }
-}
-
-.o-popup-pos-top {
-  .o-popover {
-    margin-bottom: var(--popup-gap);
-  }
-}
-
-.o-popup-pos-tr {
-  .o-popover {
-    margin-bottom: var(--popup-gap);
-  }
+.o-popover-anchor {
+  border: 1px solid var(--popup-border-color);
+  border-bottom: none;
+  border-right: none;
+  border-top-left-radius: 2px;
+  width: 8px;
+  height: 8px;
+  background-color: var(--popup-bg);
 }
 
+.o-popup-pos-left,
+.o-popup-pos-lb,
 .o-popup-pos-lt {
-  .o-popover {
-    margin-right: var(--popup-gap);
-  }
-}
-
-.o-popup-pos-left {
-  .o-popover {
-    margin-right: var(--popup-gap);
+  .o-popup-anchor {
+    transform: translate(50%, -50%) rotate(135deg);
   }
 }
 
-.o-popup-pos-lb {
-  .o-popover {
-    margin-right: var(--popup-gap);
-  }
-}
-
-.o-popup-pos-rt {
-  .o-popover {
-    margin-left: var(--popup-gap);
+.o-popup-pos-top,
+.o-popup-pos-tl,
+.o-popup-pos-tr {
+  .o-popup-anchor {
+    transform: translate(-50%, 50%) rotate(225deg);
   }
 }
 
-.o-popup-pos-right {
-  .o-popover {
-    margin-left: var(--popup-gap);
+.o-popup-pos-right,
+.o-popup-pos-rt,
+.o-popup-pos-rb {
+  .o-popup-anchor {
+    transform: translate(-50%, -50%) rotate(-45deg);
   }
 }
 
-.o-popup-pos-rb {
-  .o-popover {
-    margin-left: var(--popup-gap);
+.o-popup-pos-bottom,
+.o-popup-pos-bl,
+.o-popup-pos-br {
+  .o-popup-anchor {
+    transform: translate(-50%, -50%) rotate(45deg);
   }
 }
diff --git a/packages/opendesign/src/components/popover/style/var.scss b/packages/opendesign/src/components/popover/style/var.scss
index 995c7dd3..2125f46d 100644
--- a/packages/opendesign/src/components/popover/style/var.scss
+++ b/packages/opendesign/src/components/popover/style/var.scss
@@ -1,6 +1,6 @@
 .o-popover {
   --popup-bg: var(--o-color-bg2);
   --popup-shadow: var(--o-shadow-1);
-  --popup-gap: 4px;
   --popup-radius: var(--o-radius-s);
+  --popup-border-color: var(--o-color-border2);
 }
-- 
Gitee


From 070eb59ab5a5512b1bf3b2e735b81406c2eba87d Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 16:03:10 +0800
Subject: [PATCH 25/28] to fix

---
 packages/opendesign/src/components/popup/OPopup.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index f825ca3c..c6aab7c5 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -14,6 +14,8 @@ import { ResizeObserver } from '../resize-observer';
 import { useIntersectionObserver } from '../hooks';
 import type { IntersectionListenerT } from '../hooks';
 
+// TODO 处理嵌套
+
 const props = defineProps({
   /**
    * 弹出位置
-- 
Gitee


From a0f25dc7ecdfc2bffdb1d18235b590329d01456a Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 17:18:34 +0800
Subject: [PATCH 26/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=EF=BC=8C=E8=AE=BE=E7=BD=AEpopup=E5=AE=BD=E5=BA=A6=E8=B7=9F?=
 =?UTF-8?q?=E9=9A=8Ftarget=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/popup/OPopup.vue           | 61 +++++++++++++++----
 .../opendesign/src/components/popup/popup.ts  | 15 +++--
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index c6aab7c5..fe9ca975 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -103,9 +103,23 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  /**
+   * popup最小宽度设置为触发元素宽度
+   */
+  adjustMinWidth: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * popup宽度设置为触发元素宽度
+   */
+  adjustWidth: {
+    type: Boolean,
+    default: true,
+  },
 });
 
-const emits = defineEmits<{ (e: 'update:visible', val: boolean): void }>();
+const emits = defineEmits<{ (e: 'update:visible', val: boolean): void; (e: 'change', val: boolean): void }>();
 const triggers = Array.isArray(props.trigger) ? props.trigger : [props.trigger];
 
 const visible = ref(false);
@@ -115,7 +129,14 @@ const isTargetInViewport = ref(true);
 
 let wrapperEl: Ref<HTMLElement | null> = ref(null);
 const popupRef = ref<HTMLElement | null>(null);
-const popStyle = reactive<{ left?: string; top?: string; right?: string; bottom?: string }>({ left: '0px', top: '0px' });
+const popStyle = reactive<{
+  left?: string;
+  top?: string;
+  right?: string;
+  bottom?: string;
+  minWidth?: string;
+  width?: string;
+}>({});
 const popPosition = ref(props.position);
 
 const wrapOrigin = ref<{ left: string; top: string }>({ left: '0px', top: '0px' });
@@ -129,7 +150,7 @@ const anchorStyle = reactive<{ left?: string; top?: string; right?: string; bott
 const mounted = ref(false);
 const isAnimating = ref(false);
 
-const resizeObserver = useResizeObserver();
+const { addResizeListener, removeResizeListener } = useResizeObserver();
 const intersctionObserver = useIntersectionObserver();
 
 // 处理popup位置
@@ -218,11 +239,13 @@ const updateVisible = (isVisible: boolean, delay?: number) => {
     // 设置popup是否显示，不需要手动触发计算位置，显示时会触发resize，计算位置
     visible.value = isVisible;
     emits('update:visible', isVisible);
+    emits('change', isVisible);
+
     if (isVisible) {
       mounted.value = true;
 
       if (props.hideWhenTargetInvisible && targetEl) {
-        intersctionObserver.addListener(targetEl, onTargetInterscting);
+        intersctionObserver.addIntersectionListener(targetEl, onTargetInterscting);
       }
     }
   };
@@ -242,13 +265,20 @@ const bindTargetEvent = (el: HTMLElement | null) => {
   }
   targetEl = el;
 
+  // 初始化popup宽度，避免引起resize，触发重复计算
+  if (props.adjustMinWidth) {
+    popStyle.minWidth = `${targetEl.offsetWidth}px`;
+  } else if (props.adjustWidth) {
+    popStyle.width = `${targetEl.offsetWidth}px`;
+  }
+
   triggerListener = bindTrigger(el, popupRef, triggers, {
     updateFn: updateVisible,
     hoverDelay: props.hoverDelay,
   });
 
   if (props.hideWhenTargetInvisible) {
-    intersctionObserver.addListener(targetEl, onTargetInterscting);
+    intersctionObserver.addIntersectionListener(targetEl, onTargetInterscting);
   }
 };
 
@@ -310,12 +340,19 @@ watch(popupRef, (popEl) => {
       });
 
       // 监听targetEL尺寸变化
-      resizeObserver.addListener(targetEl, onResize);
+      addResizeListener(targetEl, (en: ResizeObserverEntry, isFirst: boolean) => {
+        if (props.adjustMinWidth) {
+          popStyle.minWidth = `${targetEl?.offsetWidth}px`;
+        } else if (props.adjustWidth) {
+          popStyle.width = `${targetEl?.offsetWidth}px`;
+        }
+        onResize(en, isFirst);
+      });
     }
 
     if (wrapperEl.value) {
       // 监听warpper尺寸变化
-      resizeObserver.addListener(wrapperEl.value, onResize);
+      addResizeListener(wrapperEl.value, onResize);
     }
   } else {
     /**
@@ -324,11 +361,11 @@ watch(popupRef, (popEl) => {
 
     handles.forEach((hl) => hl());
     if (wrapperEl.value) {
-      resizeObserver.removeListener(wrapperEl.value, onResize);
+      removeResizeListener(wrapperEl.value, onResize);
     }
     if (targetEl) {
-      resizeObserver.removeListener(targetEl, onResize);
-      intersctionObserver.removeListener(targetEl, onTargetInterscting);
+      removeResizeListener(targetEl, onResize);
+      intersctionObserver.removeIntersectionListener(targetEl, onTargetInterscting);
       isTargetInViewport.value = true;
     }
   }
@@ -378,10 +415,10 @@ onUnmounted(() => {
   });
   // 销毁popup 的 resize监听
   if (wrapperEl.value) {
-    resizeObserver.removeListener(wrapperEl.value, onResize);
+    removeResizeListener(wrapperEl.value, onResize);
   }
   if (targetEl) {
-    resizeObserver.removeListener(targetEl, onResize);
+    removeResizeListener(targetEl, onResize);
   }
 });
 </script>
diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts
index 323a7f57..0477a936 100644
--- a/packages/opendesign/src/components/popup/popup.ts
+++ b/packages/opendesign/src/components/popup/popup.ts
@@ -5,7 +5,7 @@ import type { PopupPositionT, PopupTriggerT } from './types';
 
 import { useOutClick } from '../hooks/use-out-click';
 
-const { addListener, removeListener } = useOutClick();
+const { addOutClickListener, removeOutClickListener } = useOutClick();
 interface Pos {
   left: number,
   top: number
@@ -434,7 +434,7 @@ export function bindTrigger(
     click: () => {
       el?.addEventListener('click', showFn);
 
-      addListener(el, hideFn, (e: MouseEvent) => {
+      addOutClickListener(el, hideFn, (e: MouseEvent) => {
         return !!popupRef.value?.contains(e.target as HTMLElement);
       });
 
@@ -442,7 +442,7 @@ export function bindTrigger(
         el?.removeEventListener('click', showFn);
       });
       listeners.push(() => {
-        removeListener(el, hideFn);
+        removeOutClickListener(el, hideFn);
       });
     },
     focus: () => {
@@ -461,12 +461,17 @@ export function bindTrigger(
       };
       el?.addEventListener('contextmenu', fn);
 
-      const removeFn = listenOutClick(el, hideFn);
+      addOutClickListener(el, hideFn, (e: MouseEvent) => {
+        return !!popupRef.value?.contains(e.target as HTMLElement);
+      });
 
       listeners.push(() => {
         el?.removeEventListener('contextmenu', fn);
       });
-      listeners.push(removeFn);
+
+      listeners.push(() => {
+        removeOutClickListener(el, hideFn);
+      });
     },
     none: () => { }
   };
-- 
Gitee


From aa67ccc9e089bfd482e25ee5fb56588578875bc5 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 17:57:16 +0800
Subject: [PATCH 27/28] =?UTF-8?q?=E5=A2=9E=E5=8A=A0select=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/_shared/global.ts          | 11 ++-
 .../src/components/directves/click-outside.ts |  6 +-
 .../components/directves/on-intersection.ts   |  4 +-
 .../src/components/directves/on-resize.ts     |  4 +-
 .../hooks/use-element-intersection.ts         |  4 +-
 .../components/hooks/use-element-resize.ts    |  4 +-
 .../hooks/use-intersection-observer.ts        |  4 +-
 .../src/components/hooks/use-out-click.ts     |  8 +-
 .../components/hooks/use-resize-observer.ts   |  4 +-
 .../src/components/option/OOption.vue         | 42 ++++++++++
 .../opendesign/src/components/option/index.ts | 14 ++++
 .../src/components/option/style/index.scss    | 33 ++++++++
 .../src/components/option/style/index.ts      |  1 +
 .../src/components/option/style/var.scss      | 20 +++++
 .../opendesign/src/components/option/types.ts |  0
 .../src/components/select/OSelect.vue         | 79 +++++++++++++++++++
 .../select/__demo__/SelectDisabled.vue        | 38 +++++++++
 .../select/__demo__/SelectPopupposition.vue   | 72 +++++++++++++++++
 .../components/select/__demo__/SelectSize.vue | 37 +++++++++
 .../opendesign/src/components/select/index.ts | 14 ++++
 .../src/components/select/style/index.scss    | 78 ++++++++++++++++++
 .../src/components/select/style/index.ts      |  1 +
 .../src/components/select/style/var.scss      | 31 ++++++++
 .../opendesign/src/components/select/types.ts |  2 +
 .../src/components/style/animation.scss       |  6 +-
 .../src/components/style/index.scss           |  1 +
 packages/portal/src/pages/TheSelect.vue       | 16 ++++
 27 files changed, 508 insertions(+), 26 deletions(-)
 create mode 100644 packages/opendesign/src/components/option/OOption.vue
 create mode 100644 packages/opendesign/src/components/option/index.ts
 create mode 100644 packages/opendesign/src/components/option/style/index.scss
 create mode 100644 packages/opendesign/src/components/option/style/index.ts
 create mode 100644 packages/opendesign/src/components/option/style/var.scss
 create mode 100644 packages/opendesign/src/components/option/types.ts
 create mode 100644 packages/opendesign/src/components/select/OSelect.vue
 create mode 100644 packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
 create mode 100644 packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
 create mode 100644 packages/opendesign/src/components/select/__demo__/SelectSize.vue
 create mode 100644 packages/opendesign/src/components/select/index.ts
 create mode 100644 packages/opendesign/src/components/select/style/index.scss
 create mode 100644 packages/opendesign/src/components/select/style/index.ts
 create mode 100644 packages/opendesign/src/components/select/style/var.scss
 create mode 100644 packages/opendesign/src/components/select/types.ts
 create mode 100644 packages/portal/src/pages/TheSelect.vue

diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index 05782af6..e5603c89 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -6,10 +6,11 @@ export enum Size {
   NORMAL = 'normal',
   SMALL = 'small'
 }
+export type SizeT = 'large' | 'normal' | 'small'
 
-export const defaultSize = ref(Size.NORMAL);
+export const defaultSize = ref<SizeT>('normal');
 
-export function initSize(type: Size) {
+export function initSize(type: SizeT) {
   defaultSize.value = type;
 }
 
@@ -18,9 +19,11 @@ export enum Shape {
   ROUND = 'round',
   NORMAL = 'normal'
 }
-export const defaultShape = ref(Shape.NORMAL);
+export type ShapeT = 'round' | 'normal'
 
-export function initShape(shape: Shape) {
+export const defaultShape = ref<ShapeT>('normal');
+
+export function initShape(shape: ShapeT) {
   defaultShape.value = shape;
 }
 
diff --git a/packages/opendesign/src/components/directves/click-outside.ts b/packages/opendesign/src/components/directves/click-outside.ts
index 7c59e960..d379d176 100644
--- a/packages/opendesign/src/components/directves/click-outside.ts
+++ b/packages/opendesign/src/components/directves/click-outside.ts
@@ -1,14 +1,14 @@
 import { ObjectDirective, DirectiveBinding } from 'vue';
 import { useOutClick } from '../hooks/use-out-click';
 
-const { addListener, removeListener } = useOutClick();
+const { addOutClickListener, removeOutClickListener } = useOutClick();
 
 const vOutClick: ObjectDirective = {
   beforeMount(el: HTMLElement, binding: DirectiveBinding) {
-    addListener(el, binding.value);
+    addOutClickListener(el, binding.value);
   },
   unmounted(el: HTMLElement) {
-    removeListener(el);
+    removeOutClickListener(el);
   }
 };
 
diff --git a/packages/opendesign/src/components/directves/on-intersection.ts b/packages/opendesign/src/components/directves/on-intersection.ts
index c49a3b4f..9a3d76bb 100644
--- a/packages/opendesign/src/components/directves/on-intersection.ts
+++ b/packages/opendesign/src/components/directves/on-intersection.ts
@@ -9,12 +9,12 @@ const vIntersection: ObjectDirective = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     if (isFunction(binding.value)) {
       listener = binding.value;
-      io.addListener(el, listener);
+      io.addIntersectionListener(el, listener);
     }
   },
   unmounted(el: HTMLElement) {
     if (listener) {
-      io.removeListener(el, listener);
+      io.removeIntersectionListener(el, listener);
     }
   },
 };
diff --git a/packages/opendesign/src/components/directves/on-resize.ts b/packages/opendesign/src/components/directves/on-resize.ts
index b2f0eb45..86606666 100644
--- a/packages/opendesign/src/components/directves/on-resize.ts
+++ b/packages/opendesign/src/components/directves/on-resize.ts
@@ -9,12 +9,12 @@ const vOnResize: ObjectDirective = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     if (isFunction(binding.value)) {
       listener = binding.value;
-      ob.addListener(el, listener);
+      ob.addResizeListener(el, listener);
     }
   },
   unmounted(el: HTMLElement) {
     if (listener) {
-      ob.removeListener(el, listener);
+      ob.removeResizeListener(el, listener);
     }
   },
 };
diff --git a/packages/opendesign/src/components/hooks/use-element-intersection.ts b/packages/opendesign/src/components/hooks/use-element-intersection.ts
index 1436c162..01a3e4c2 100644
--- a/packages/opendesign/src/components/hooks/use-element-intersection.ts
+++ b/packages/opendesign/src/components/hooks/use-element-intersection.ts
@@ -12,12 +12,12 @@ export function useIntersectionObserverDirective({ listener, removeOnUnmounted }
     vIntersectionObserver: {
       mounted(el: HTMLElement) {
         if (isFunction(listener)) {
-          io.addListener(el, listener);
+          io.addIntersectionListener(el, listener);
         }
       },
       unmounted(el: HTMLElement) {
         if (listener && removeOnUnmounted) {
-          io.removeListener(el, listener);
+          io.removeIntersectionListener(el, listener);
         }
       },
     }
diff --git a/packages/opendesign/src/components/hooks/use-element-resize.ts b/packages/opendesign/src/components/hooks/use-element-resize.ts
index 88af54e2..4ea41216 100644
--- a/packages/opendesign/src/components/hooks/use-element-resize.ts
+++ b/packages/opendesign/src/components/hooks/use-element-resize.ts
@@ -9,12 +9,12 @@ export function useReiszeObserverDirective(onResize: ResizeListenerT): { vResize
     vResizeObserver: {
       mounted(el: HTMLElement) {
         if (isFunction(onResize)) {
-          ob.addListener(el, onResize);
+          ob.addResizeListener(el, onResize);
         }
       },
       unmounted(el: HTMLElement) {
         if (onResize) {
-          ob.removeListener(el, onResize);
+          ob.removeResizeListener(el, onResize);
         }
       },
     }
diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
index d2028c63..6f171276 100644
--- a/packages/opendesign/src/components/hooks/use-intersection-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts
@@ -48,7 +48,7 @@ export function useIntersectionObserver(
      * listener: resize回调, 移除监听时需要指定该监听函数
      * isFirst: 是否为初次监听时的回调
      */
-    addListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
+    addIntersectionListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
       el = ele || element;
       cb = listener || cb;
 
@@ -75,7 +75,7 @@ export function useIntersectionObserver(
      * 移除监听
      * listener: 要移除的监听函数，如果不传，则使用初始化时的回调
      */
-    removeListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
+    removeIntersectionListener: (ele?: HTMLElement, listener?: IntersectionListenerT) => {
       let fn = listener || cb;
       el = ele || element;
 
diff --git a/packages/opendesign/src/components/hooks/use-out-click.ts b/packages/opendesign/src/components/hooks/use-out-click.ts
index b5ffde06..90f5d991 100644
--- a/packages/opendesign/src/components/hooks/use-out-click.ts
+++ b/packages/opendesign/src/components/hooks/use-out-click.ts
@@ -17,7 +17,7 @@ window.addEventListener('mousedown', (e) => {
   });
 });
 
-function addListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent) => boolean) {
+function addOutClickListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent) => boolean) {
   if (!elList.has(el)) {
     elList.set(el, []);
   }
@@ -31,7 +31,7 @@ function addListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent
   }
 }
 
-function removeListener(el: HTMLElement, listener?: () => void) {
+function removeOutClickListener(el: HTMLElement, listener?: () => void) {
   if (listener) {
     const handlers = elList.get(el);
     if (!handlers) {
@@ -48,7 +48,7 @@ function removeListener(el: HTMLElement, listener?: () => void) {
 
 export function useOutClick() {
   return {
-    addListener,
-    removeListener,
+    addOutClickListener,
+    removeOutClickListener,
   };
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts
index a4c1c795..cb1e7db9 100644
--- a/packages/opendesign/src/components/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts
@@ -52,7 +52,7 @@ export function useResizeObserver(
      * listener: resize回调, 移除监听时需要指定该监听函数
      * isFirst: 是否为初次监听时的回调
      */
-    addListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
+    addResizeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
       el = ele || element;
       cb = listener || onResize;
 
@@ -80,7 +80,7 @@ export function useResizeObserver(
      * 移除监听
      * listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调
      */
-    removeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
+    removeResizeListener: (ele?: HTMLElement, listener?: ResizeListenerT) => {
 
       let fn = listener || cb;
       el = ele || element;
diff --git a/packages/opendesign/src/components/option/OOption.vue b/packages/opendesign/src/components/option/OOption.vue
new file mode 100644
index 00000000..83d4a0bc
--- /dev/null
+++ b/packages/opendesign/src/components/option/OOption.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import { OptionProvideKey } from '../_shared/global';
+import type { OptionValueT } from '../_shared/global';
+
+interface OptionPropT {
+  label?: string;
+  value: string | number;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<OptionPropT>(), {
+  value: '',
+  label: '',
+});
+
+const val = inject(`${OptionProvideKey}/value`);
+const updateFn = inject(`${OptionProvideKey}/update`) as (val: OptionValueT, emit?: boolean) => void;
+
+if (props.value === val) {
+  updateFn({
+    label: props.label || `${props.value}`,
+    value: props.value,
+  });
+}
+
+const clickOption = () => {
+  if (!props.disabled) {
+    updateFn(
+      {
+        label: props.label || `${props.value}`,
+        value: props.value,
+      },
+      true
+    );
+  }
+};
+</script>
+<template>
+  <div class="o-option" :class="{ active: val === props.value, 'is-disabled': props.disabled }" @click="clickOption">
+    <slot>{{ props.label || `${props.value}` }}</slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/option/index.ts b/packages/opendesign/src/components/option/index.ts
new file mode 100644
index 00000000..34f7ead8
--- /dev/null
+++ b/packages/opendesign/src/components/option/index.ts
@@ -0,0 +1,14 @@
+import _OOption from './OOption.vue';
+import type { App } from 'vue';
+
+// export * from './types';
+
+const OOption = Object.assign(_OOption, {
+  install(app: App) {
+    app.component(_OOption.name, _OOption);
+  },
+});
+
+export {
+  OOption,
+};
diff --git a/packages/opendesign/src/components/option/style/index.scss b/packages/opendesign/src/components/option/style/index.scss
new file mode 100644
index 00000000..b40e5d99
--- /dev/null
+++ b/packages/opendesign/src/components/option/style/index.scss
@@ -0,0 +1,33 @@
+@import './var.scss';
+
+.o-option {
+  cursor: pointer;
+  padding: var(--option-padding);
+  background-color: var(--option-bg);
+
+  font-size: var(--option-text-size);
+  line-height: var(--option-text-height);
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--option-bg_hover);
+    color: var(--option-color_hover);
+  }
+  &.active {
+    color: var(--option-color_active);
+    background-color: var(--option-bg_active);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--option-color_disabled);
+    background-color: var(--option-bg_disabled);
+  }
+}
+.o-options-size-small {
+  .o-option {
+    padding: var(--option-padding-s);
+    font-size: var(--option-text-size_small);
+    line-height: var(--option-text-height_small);
+  }
+}
diff --git a/packages/opendesign/src/components/option/style/index.ts b/packages/opendesign/src/components/option/style/index.ts
new file mode 100644
index 00000000..67aac616
--- /dev/null
+++ b/packages/opendesign/src/components/option/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/option/style/var.scss b/packages/opendesign/src/components/option/style/var.scss
new file mode 100644
index 00000000..71db472a
--- /dev/null
+++ b/packages/opendesign/src/components/option/style/var.scss
@@ -0,0 +1,20 @@
+.o-option {
+  --option-color: var(--o-color-text2);
+  --option-color_hover: var(--o-color-text2_inverse);
+  --option-color_active: var(--o-color-text2_inverse);
+  --option-color_disabled: var(--o-color-text4);
+
+  --option-bg: transparent;
+  --option-bg_hover: var(--o-color-primary3);
+  --option-bg_active: var(--o-color-primary2);
+  --option-bg_disabled: transparent;
+
+  --option-text-size: var(--o-font_size-text);
+  --option-text-height: var(--o-line_height-text);
+
+  --option-text-size_small: var(--o-font_size-tip1);
+  --option-text-height_small: var(--o-line_height-tip1);
+
+  --option-padding: 5px 16px;
+  --option-padding-s: 3px 8px;
+}
diff --git a/packages/opendesign/src/components/option/types.ts b/packages/opendesign/src/components/option/types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
new file mode 100644
index 00000000..73a767e4
--- /dev/null
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { defaultSize, defaultShape } from '../_shared/global';
+import type { SizeT, ShapeT } from '../_shared/global';
+import { OptionProvideKey } from '../_shared/global';
+import type { OptionValueT } from '../_shared/global';
+import { IconArrowTraingleDown } from '../icons';
+import { OPopup, PopupPositionT } from '../popup';
+
+interface SelectPropT {
+  size?: SizeT;
+  shape?: ShapeT;
+  modelValue: string | number;
+  placeholder?: string;
+  disabled?: boolean;
+  optionPosition?: PopupPositionT;
+  optionWidthMode?: 'auto' | 'min-width' | 'width';
+  optionWrapClass?: string;
+}
+const props = withDefaults(defineProps<SelectPropT>(), {
+  modelValue: '',
+  size: defaultSize.value,
+  shape: defaultShape.value,
+  placeholder: 'please select...',
+  optionPosition: 'bl',
+  optionWidthMode: 'min-width',
+  optionWrapClass: '',
+});
+
+const activeLabel = ref('');
+const activeVal = ref(props.modelValue);
+const emits = defineEmits(['update:modelValue']);
+const selectRef = ref<HTMLElement>();
+
+const showOption = ref(false);
+provide(`${OptionProvideKey}/update`, (val: OptionValueT, emit?: boolean) => {
+  activeLabel.value = val.label;
+  if (emit) {
+    emits('update:modelValue', val.value);
+    activeVal.value = val.value;
+    showOption.value = false;
+  }
+});
+
+provide(`${OptionProvideKey}/value`, activeVal);
+const onOptionChange = (visible: boolean) => {
+  if (visible) {
+    console.log(selectRef.value?.clientWidth);
+  }
+};
+</script>
+<template>
+  <div ref="selectRef" class="o-select" :class="[`o-select-size-${props.size}`, `o-select-shape-${props.shape}`, { 'is-selecting': showOption }]">
+    <div class="o-select-wrap" :class="{ 'is-disabled': props.disabled }">
+      <input :value="activeLabel" type="text" :placeholder="props.placeholder" class="o-select-input" readonly />
+      <span class="o-select-suffix">
+        <slot name="suffix">
+          <span class="o-select-icon-arrow" :class="{ active: showOption }">
+            <IconArrowTraingleDown />
+          </span>
+        </slot>
+      </span>
+    </div>
+    <OPopup
+      v-model:visible="showOption"
+      :position="props.optionPosition"
+      :target="selectRef"
+      trigger="click"
+      :offset="4"
+      :adjust-min-width="props.optionWidthMode === 'min-width'"
+      :adjust-width="props.optionWidthMode === 'width'"
+      @change="onOptionChange"
+    >
+      <div class="o-select-options" :class="[`o-options-size-${props.size}`, props.optionWrapClass]">
+        <slot></slot>
+      </div>
+    </OPopup>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue b/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
new file mode 100644
index 00000000..3ff67101
--- /dev/null
+++ b/packages/opendesign/src/components/select/__demo__/SelectDisabled.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSelect } from '../index';
+import { OOption } from '../../option';
+
+const selectVal = ref('opt1');
+const selectVal2 = ref('');
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+</script>
+<template>
+  <h4>Disabled</h4>
+  <section>
+    <OSelect v-model="selectVal">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+
+    <OSelect v-model="selectVal2">
+      <OOption :value="options[0].value" />
+      <OOption :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" disabled>
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" disabled />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
new file mode 100644
index 00000000..fea66fbc
--- /dev/null
+++ b/packages/opendesign/src/components/select/__demo__/SelectPopupposition.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSelect } from '../index';
+import { OOption } from '../../option';
+
+const selectVal = ref('opt1');
+const selectVal2 = ref('');
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'option 2', value: 'opt2' },
+];
+</script>
+<template>
+  <h4>popup position</h4>
+  <section>
+    <OSelect v-model="selectVal" option-position="tl">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="top">
+      <OOption :value="options[0].value" />
+      <OOption :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="tr">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="bl">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="bottom">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="br">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" option-position="lt">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="left">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="lb">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" option-position="rt">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="right">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+    <OSelect v-model="selectVal2" option-position="rb">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+    </OSelect>
+  </section>
+</template>
+<style lang="scss" scoped>
+section > * {
+  margin: 40px;
+}
+</style>
diff --git a/packages/opendesign/src/components/select/__demo__/SelectSize.vue b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
new file mode 100644
index 00000000..66c80f65
--- /dev/null
+++ b/packages/opendesign/src/components/select/__demo__/SelectSize.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OSelect } from '../index';
+import { OOption } from '../../option';
+const selectVal = ref('opt1');
+const selectVal2 = ref('');
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+</script>
+<template>
+  <h4>Size</h4>
+  <section>
+    <OSelect v-model="selectVal" size="large">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+
+    <OSelect v-model="selectVal2">
+      <OOption :value="options[0].value" />
+      <OOption :value="options[1].value" disabled />
+    </OSelect>
+
+    <OSelect v-model="selectVal2" size="small">
+      <OOption :label="options[0].label" :value="options[0].value" />
+      <OOption :label="options[1].label" :value="options[1].value" disabled />
+      <OOption :label="options[2].label" :value="options[2].value" />
+      <OOption :label="options[3].label" :value="options[3].value" />
+    </OSelect>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/select/index.ts b/packages/opendesign/src/components/select/index.ts
new file mode 100644
index 00000000..54dbbeb8
--- /dev/null
+++ b/packages/opendesign/src/components/select/index.ts
@@ -0,0 +1,14 @@
+import _OSelect from './OSelect.vue';
+import type { App } from 'vue';
+
+// export * from './types';
+
+const OSelect = Object.assign(_OSelect, {
+  install(app: App) {
+    app.component(_OSelect.name, _OSelect);
+  },
+});
+
+export {
+  OSelect,
+};
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
new file mode 100644
index 00000000..a56f7e44
--- /dev/null
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -0,0 +1,78 @@
+@import './var.scss';
+@import '../../popup/style/index.scss';
+
+.o-select-size-small {
+  .o-select-wrap {
+    padding: 0 4px 0 8px;
+    height: var(--select-height-s);
+    border-radius: var(--select-radius-s);
+  }
+}
+
+.o-select-size-normal {
+  .o-select-wrap {
+    padding: 4px 8px 4px 12px;
+    height: var(--select-height-m);
+    border-radius: var(--select-radius-m);
+  }
+}
+
+.o-select-size-large {
+  .o-select-wrap {
+    padding: 4px 12px 4px 16px;
+    height: var(--select-height-l);
+    border-radius: var(--select-radius-l);
+  }
+}
+
+.o-select-input {
+  outline: none;
+  border: none;
+  padding: 0;
+  cursor: inherit;
+  background-color: transparent;
+  display: inline-flex;
+}
+.o-select-wrap {
+  border: 1px solid var(--select-border);
+  border-radius: 4px;
+  padding: 0 12px;
+  cursor: pointer;
+  color: var(--select-color);
+  display: inline-flex;
+  height: var(--select-height-m);
+
+  &:hover {
+    border-color: var(--select-border_hover);
+    background-color: var(--select-bg_hover);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    border-color: var(--select-border_disabled);
+    background-color: var(--select-bg_disabled);
+    color: var(--select-color_disabled);
+  }
+}
+.o-select-suffix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.o-select-icon-arrow {
+  display: inline-flex;
+  align-items: center;
+  transition: transform var(--o-transition-duration-2);
+  svg {
+    display: block;
+  }
+  &.active {
+    transform: rotateX(180deg);
+  }
+}
+
+.o-select-options {
+  background-color: var(--select-options-bg);
+  box-shadow: var(--select-options-shadow);
+  border-radius: var(--select-options-radius);
+  border: var(--select-options-border);
+}
diff --git a/packages/opendesign/src/components/select/style/index.ts b/packages/opendesign/src/components/select/style/index.ts
new file mode 100644
index 00000000..67aac616
--- /dev/null
+++ b/packages/opendesign/src/components/select/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/select/style/var.scss b/packages/opendesign/src/components/select/style/var.scss
new file mode 100644
index 00000000..525a0aaf
--- /dev/null
+++ b/packages/opendesign/src/components/select/style/var.scss
@@ -0,0 +1,31 @@
+.o-select {
+  --select-text-size: var(--o-font_size-text);
+  --select-text-height: var(--o-line_height-text);
+
+  --select-height-s: var(--o-size-s);
+  --select-height-m: var(--o-size-m);
+  --select-height-l: var(--o-size-l);
+
+  --select-radius-s: var(--o-radius-s);
+  --select-radius-m: var(--o-radius-s);
+  --select-radius-l: var(--o-radius-s);
+
+  --select-border: var(--o-color-info1);
+  --select-border_hover: var(--o-color-primary2);
+  --select-border_active: var(--o-color-primary3);
+  --select-border_disabled: var(--o-color-info1);
+
+  --select-bg: var(--o-color-bg1);
+  --select-bg_hover: var(--o-color-bg2);
+  --select-bg_disabled: var(--o-color-info4);
+
+  --select-color: var(--o-color-text2);
+  --select-color_disabled: var(--o-color-text4);
+}
+
+.o-select-options {
+  --select-options-bg: var(--o-color-bg2);
+  --select-options-shadow: none;
+  --select-options-border: 1px solid var(--o-color-primary2);
+  --select-options-radius: var(--o-radius-s);
+}
diff --git a/packages/opendesign/src/components/select/types.ts b/packages/opendesign/src/components/select/types.ts
new file mode 100644
index 00000000..139597f9
--- /dev/null
+++ b/packages/opendesign/src/components/select/types.ts
@@ -0,0 +1,2 @@
+
+
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index e3987f3c..d8dc938e 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -12,7 +12,7 @@ $ani-prefix: 'o-ani';
 
 @keyframes o-zoom-fade-in {
   0% {
-    transform: scale(0.9);
+    transform: scale(0.95);
     opacity: 0;
   }
   100% {
@@ -22,8 +22,8 @@ $ani-prefix: 'o-ani';
 }
 
 .o-zoom-fade-enter-active {
-  animation: o-zoom-fade-in var(--o-transition-duration-3);
+  animation: o-zoom-fade-in var(--o-transition-duration-2);
 }
 .o-zoom-fade-leave-active {
-  animation: o-zoom-fade-in var(--o-transition-duration-2) reverse;
+  animation: o-zoom-fade-in var(--o-transition-duration-1) reverse;
 }
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 2e799670..000a1904 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -9,6 +9,7 @@
   --o-size-l: 40px;
   --o-size-m: 32px;
   --o-size-s: 24px;
+  --o-transition-duration-1: 0.1s;
   --o-transition-duration-2: 0.2s;
   --o-transition-duration-3: 0.3s;
 }
diff --git a/packages/portal/src/pages/TheSelect.vue b/packages/portal/src/pages/TheSelect.vue
new file mode 100644
index 00000000..91b4680e
--- /dev/null
+++ b/packages/portal/src/pages/TheSelect.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import '@opensig/opendesign/src/components/select/style';
+import '@opensig/opendesign/src/components/option/style';
+
+import SelectSize from '@demo/select/__demo__/SelectSize.vue';
+import SelectDisabled from '@demo/select/__demo__/SelectDisabled.vue';
+import SelectPopupposition from '@demo/select/__demo__/SelectPopupposition.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <SelectSize />
+    <SelectDisabled />
+    <SelectPopupposition />
+  </div>
+</template>
+<style lang="scss"></style>
-- 
Gitee


From 4b1bfc9d16d8bd23fe3448de5c7ab6157f4480cb Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 18:03:16 +0800
Subject: [PATCH 28/28] Shape => ShapeT  Size => SizeT

---
 .../src/components/button/OButton.vue         | 11 ++++----
 .../button/__demo__/BtnDisabled.vue           | 10 +++----
 .../components/button/__demo__/BtnIcon.vue    | 26 +++++++++----------
 .../components/button/__demo__/BtnShape.vue   | 14 +++++-----
 .../components/button/__demo__/BtnSize.vue    |  8 +++---
 .../components/button/__demo__/BtnType.vue    | 10 +++----
 .../opendesign/src/components/button/types.ts | 11 +-------
 7 files changed, 41 insertions(+), 49 deletions(-)

diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue
index cc9f1dd1..e5e97e04 100644
--- a/packages/opendesign/src/components/button/OButton.vue
+++ b/packages/opendesign/src/components/button/OButton.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { defaultSize, defaultShape } from '../_shared/global';
-import { ButtonSize, ButtonType, ButtonShape } from './types';
+import type { SizeT, ShapeT } from '../_shared/global';
+import { ButtonTypeT } from './types';
 
 interface ButtonPropT {
-  type?: ButtonType;
-  size?: ButtonSize;
-  shape?: ButtonShape;
+  type?: ButtonTypeT;
+  size?: SizeT;
+  shape?: ShapeT;
 }
 const props = withDefaults(defineProps<ButtonPropT>(), {
-  type: ButtonType.OUTLINE,
+  type: 'outline',
   size: defaultSize.value,
   shape: defaultShape.value,
 });
diff --git a/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue b/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
index c842b400..cd607a52 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { OButton, ButtonType } from '../index';
+import { OButton } from '../index';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY" disabled>Primary Button</OButton>
-    <OButton :type="ButtonType.OUTLINE" disabled>Outline Button</OButton>
-    <OButton :type="ButtonType.TEXT" disabled>Text Button</OButton>
-    <OButton :type="ButtonType.LINK" disabled>Link Button</OButton>
+    <OButton type="primary" disabled>Primary Button</OButton>
+    <OButton type="outline" disabled>Outline Button</OButton>
+    <OButton type="text" disabled>Text Button</OButton>
+    <OButton type="link" disabled>Link Button</OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
index c56dce8a..120a943e 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnIcon.vue
@@ -1,44 +1,44 @@
 <script setup lang="ts">
-import { OButton, ButtonType, ButtonSize, ButtonShape } from '../index';
+import { OButton } from '../index';
 import { IconAdd } from '../../icons';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE">
+    <OButton type="primary" size="large">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton :type="ButtonType.PRIMARY">
+    <OButton type="primary">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.SMALL">
+    <OButton type="primary" size="small">
       <template #icon><IconAdd /></template>Primary Button
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.LARGE">
+    <OButton type="outline" size="large">
       Outline Button<template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE">
+    <OButton type="outline">
       Outline Button<template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL">
+    <OButton type="outline" size="small">
       Outline Button<template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE">
+    <OButton type="primary" size="large">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE">
+    <OButton type="outline">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL">
+    <OButton type="outline" size="small">
       <template #icon><IconAdd /></template>
     </OButton>
 
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE" :shape="ButtonShape.ROUND">
+    <OButton type="primary" size="large" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :shape="ButtonShape.ROUND">
+    <OButton type="outline" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL" :shape="ButtonShape.ROUND">
+    <OButton type="outline" size="small" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
   </section>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnShape.vue b/packages/opendesign/src/components/button/__demo__/BtnShape.vue
index d72c066f..74d2fa40 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnShape.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnShape.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { OButton, ButtonType, ButtonSize, ButtonShape } from '../index';
+import { OButton } from '../index';
 import { IconAdd } from '../../icons';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE" :shape="ButtonShape.ROUND">
+    <OButton type="primary" size="large" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :shape="ButtonShape.ROUND">
+    <OButton type="outline" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL" :shape="ButtonShape.ROUND">
+    <OButton type="outline" size="small" shape="round">
       <template #icon><IconAdd /></template>
     </OButton>
 
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE" :shape="ButtonShape.ROUND">
+    <OButton type="primary" size="large" shape="round">
       <template #icon><IconAdd /></template>Round Button
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :shape="ButtonShape.ROUND">
+    <OButton type="outline" shape="round">
       <template #icon><IconAdd /></template>Round Button
     </OButton>
-    <OButton :type="ButtonType.OUTLINE" :size="ButtonSize.SMALL" :shape="ButtonShape.ROUND">
+    <OButton type="outline" size="small" shape="round">
       <template #icon><IconAdd /></template>Round Button
     </OButton>
   </section>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnSize.vue b/packages/opendesign/src/components/button/__demo__/BtnSize.vue
index da1a553f..694701ed 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnSize.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnSize.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { OButton, ButtonType, ButtonSize } from '../index';
+import { OButton } from '../index';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.LARGE"> Large Button </OButton>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.NORMAL"> Normal Button </OButton>
-    <OButton :type="ButtonType.PRIMARY" :size="ButtonSize.SMALL"> Small Button </OButton>
+    <OButton type="primary" size="large"> Large Button </OButton>
+    <OButton type="primary" size="normal"> Normal Button </OButton>
+    <OButton type="primary" size="small"> Small Button </OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnType.vue b/packages/opendesign/src/components/button/__demo__/BtnType.vue
index 0e81e350..fd47e1ef 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnType.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnType.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { OButton, ButtonType } from '../index';
+import { OButton } from '../index';
 </script>
 <template>
   <section>
-    <OButton :type="ButtonType.PRIMARY">Primary Button</OButton>
-    <OButton :type="ButtonType.OUTLINE">Outline Button</OButton>
-    <OButton :type="ButtonType.TEXT">Text Button</OButton>
-    <OButton :type="ButtonType.LINK">Link Button</OButton>
+    <OButton type="primary">Primary Button</OButton>
+    <OButton type="outline">Outline Button</OButton>
+    <OButton type="text">Text Button</OButton>
+    <OButton type="link">Link Button</OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index e885ef92..48506099 100644
--- a/packages/opendesign/src/components/button/types.ts
+++ b/packages/opendesign/src/components/button/types.ts
@@ -1,10 +1 @@
-import { Size as ButtonSize, Shape as ButtonShape } from '../_shared/global';
-
-export { ButtonSize, ButtonShape };
-
-export enum ButtonType {
-  PRIMARY = 'primary',
-  OUTLINE = 'outline',
-  TEXT = 'text',
-  LINK = 'link',
-}
+export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link'
\ No newline at end of file
-- 
Gitee