fix(select-tree): 修正下拉宽度变更

WeBankFinTech · Jul 24, 2023 · d1016c8 · d1016c8
1 parent 719023d
commit d1016c8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 15 deletions.
diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
@@ -206,6 +206,11 @@ export default defineComponent({
 
         watch(isOpened, () => {
             emit('visibleChange', unref(isOpened));
+
+            // trigger 在mounted 之后可能会改变
+            if (isOpened.value && triggerDomRef.value) {
+                triggerWidth.value = triggerDomRef.value.$el.offsetWidth;
+            }
         });
 
         const handleChange = () => {
@@ -341,12 +346,6 @@ export default defineComponent({
         const triggerDomRef = ref();
         const triggerWidth = ref(0);
 
-        onMounted(() => {
-            if (triggerDomRef.value) {
-                triggerWidth.value = triggerDomRef.value.$el.offsetWidth;
-            }
-        });
-
         const dropdownStyle = computed(() => {
             const style: CSSProperties = {};
             if (triggerWidth.value) {

diff --git a/components/select/select.vue b/components/select/select.vue
@@ -137,6 +137,7 @@ export default defineComponent({
 
         watch(isOpenedRef, () => {
             emit('visibleChange', unref(isOpenedRef));
+            // trigger 在mounted 之后可能会改变
             if (isOpenedRef.value && triggerRef.value) {
                 triggerWidth.value = triggerRef.value.$el.offsetWidth;
             }
@@ -373,12 +374,6 @@ export default defineComponent({
             }
         };
 
-        onMounted(() => {
-            if (triggerRef.value) {
-                triggerWidth.value = triggerRef.value.$el.offsetWidth;
-            }
-        });
-
         const dropdownStyle = computed(() => {
             const style: CSSProperties = {};
             if (triggerWidth.value) {

diff --git a/docs/.vitepress/components/selectTree/common.vue b/docs/.vitepress/components/selectTree/common.vue
@@ -28,9 +28,9 @@ function createLabel(level) {
 export default {
     setup() {
         const data = ref([]);
-      setTimeout(()=>{
-        data.value = createData(4);
-      })
+        setTimeout(() => {
+            data.value = createData(4);
+        });
         return {
             data,
         };