select+

xinnian999 · May 17, 2024 · e867698 · e867698
1 parent a527992
commit e867698
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/src/components/Select/index.vue b/src/components/Select/index.vue
@@ -22,8 +22,7 @@
         </template>
       </div>
       <div :class="ns('select-suffix')">
-        <IconDropUp v-if="visible" />
-        <IconDropDown v-else />
+        <IconDropDown />
       </div>
     </div>
   </e-dropdown>

diff --git a/src/components/Tooltip/index.vue b/src/components/Tooltip/index.vue
@@ -71,6 +71,12 @@ const dismiss = _.debounce((event: MouseEvent) => {
   }
 }, 50)
 
+const resizeObserver = new ResizeObserver(() => {
+  if (visible.value) {
+    updatePosition()
+  }
+})
+
 watch(visible, (newValue) => {
   if (newValue) {
     nextTick(() => {
@@ -91,9 +97,13 @@ watch(visible, (newValue) => {
 
 onMounted(() => {
   window.addEventListener(triggerName.value, dismiss)
+
+  resizeObserver.observe(referenceSlot.value)
 })
 
 onUnmounted(() => {
   window.removeEventListener(triggerName.value, dismiss)
+
+  resizeObserver.disconnect()
 })
 </script>
diff --git a/src/style/select.scss b/src/style/select.scss
@@ -1,4 +1,5 @@
 @include ns(select) {
+  $name: &;
   border-radius: getVar('border', 'radius');
   border: 1px solid getVar('border', 'color');
   padding: 5px 10px;
@@ -26,9 +27,13 @@
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
+    transition: transform 0.2s;
   }
 
   &.is-focus {
     border-color: getVar('primary', 'color');
+    #{$name}-suffix {
+      transform: translateY(-50%) rotate(180deg);
+    }
   }
 }