From be792fdb049fe00a9c54a66799f9f01c618569ca Mon Sep 17 00:00:00 2001
From: zcating <zcating@qq.com>
Date: Wed, 15 Dec 2021 01:05:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(dropdown):=20=E6=B7=BB=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=AE=BD=E5=BA=A6=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/dropdown/src/dropdown-types.ts      |  5 +-
 .../devui/dropdown/src/dropdown.scss          |  4 ++
 .../devui-vue/devui/dropdown/src/dropdown.tsx | 42 +++++++------
 .../docs/components/dropdown/index.md         | 62 +++++++++++--------
 4 files changed, 67 insertions(+), 46 deletions(-)

diff --git a/packages/devui-vue/devui/dropdown/src/dropdown-types.ts b/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
index 706048dfb4..6666c69c13 100644
--- a/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
+++ b/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
@@ -36,8 +36,11 @@ export const dropdownProps = {
   showAnimation: {
     type: Boolean,
     default: true
+  },
+  width: {
+    type: [Number, String],
+    default: '102px'
   }
-
 } as const
 
 export type DropdownProps = ExtractPropTypes<typeof dropdownProps>
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown.scss b/packages/devui-vue/devui/dropdown/src/dropdown.scss
index faa3cd509d..5a333ba05b 100644
--- a/packages/devui-vue/devui/dropdown/src/dropdown.scss
+++ b/packages/devui-vue/devui/dropdown/src/dropdown.scss
@@ -8,6 +8,10 @@
   }
 }
 
+.devui-dropdown-menu-wrap .devui-dropdown-menu {
+  width: 100%;
+}
+
 .devui-dropdown-animation span {
   &.icon-chevron-down,
   &.icon-select-arrow {
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown.tsx b/packages/devui-vue/devui/dropdown/src/dropdown.tsx
index 5dd8d6ba64..ea7b0e024f 100644
--- a/packages/devui-vue/devui/dropdown/src/dropdown.tsx
+++ b/packages/devui-vue/devui/dropdown/src/dropdown.tsx
@@ -43,24 +43,30 @@ export default defineComponent({
       return props.showAnimation ? visible.value : true;
     });
 
-    return () => {
-      // let vnodes = ctx.slots.default?.() ?? [];
-      return (
-        <>
-          <FlexibleOverlay
-            origin={props.origin}
-            v-model:visible={visible.value}
-            position={position}
-            hasBackdrop={false}
+    const wrapStyle = computed(() => typeof props.width === 'string' ? {
+      width: props.width,
+    }: {
+      width: `${props.width}px`,
+    });
+ 
+    return () => (
+      <FlexibleOverlay
+        origin={props.origin}
+        v-model:visible={visible.value}
+        position={position}
+        hasBackdrop={false}
+      >
+        <Transition name="devui-dropdown-fade">
+          <div 
+            ref={dropdownEl}
+            class="devui-dropdown-menu-wrap" 
+            style={wrapStyle.value}
+            v-show={animatedVisible.value} 
           >
-            <Transition name="devui-dropdown-fade">
-              <div v-show={animatedVisible.value} ref={dropdownEl} style="min-width:102px">
-                {ctx.slots.default?.()}
-              </div>
-            </Transition>
-          </FlexibleOverlay>
-        </>
-      )
-    };
+            {ctx.slots.default?.()}
+          </div>
+        </Transition>
+      </FlexibleOverlay>
+    );
   }
 })
diff --git a/packages/devui-vue/docs/components/dropdown/index.md b/packages/devui-vue/docs/components/dropdown/index.md
index 061c602400..8dd187a5b8 100644
--- a/packages/devui-vue/docs/components/dropdown/index.md
+++ b/packages/devui-vue/docs/components/dropdown/index.md
@@ -12,33 +12,38 @@
 
 ```vue
 <template>
-  <div style="display:flex">
-    触发方式：
-    <d-radio-group direction="row" v-model="trigger">
-      <d-radio v-for="item in triggerList" :key="item" :value="item">
-        {{ item }}
-      </d-radio>
-    </d-radio-group>
+  <div class="space-y-s">
+    <div class="flex items-center">
+      触发方式：
+      <d-radio-group direction="row" v-model="trigger">
+        <d-radio v-for="item in triggerList" :key="item" :value="item">
+          {{ item }}
+        </d-radio>
+      </d-radio-group>
+    </div>
+    <div class="flex items-center">
+      关闭区域： 
+      <d-radio-group direction="row" v-model="closeScope">
+        <d-radio v-for="item in closeScopeAreas" :key="item" :value="item">
+          {{ item }}
+        </d-radio>
+      </d-radio-group>
+    </div>
+
+    <div class="flex items-center">
+      仅当鼠标从菜单移除时才关闭：
+      <d-switch v-model:checked="closeOnMouseLeaveMenu"></d-switch>
+    </div>
+
+    <div class="flex items-center">
+      动画开关：
+      <d-switch v-model:checked="showAnimation"></d-switch>
+    </div>
+    <div class="flex items-center">
+      自定义宽度：
+      <d-input-number v-model="width" :max="400" :min="100" :step="100" /> px
+    </div>
   </div>
-  <div style="display:flex">
-    关闭区域： 
-    <d-radio-group direction="row" v-model="closeScope">
-      <d-radio v-for="item in closeScopeAreas" :key="item" :value="item">
-        {{ item }}
-      </d-radio>
-    </d-radio-group>
-  </div>
-
-  <div style="display:flex">
-    仅当鼠标从菜单移除时才关闭：
-    <d-switch v-model:checked="closeOnMouseLeaveMenu"></d-switch>
-  </div>
-
-  <div style="display:flex">
-    动画开关：
-    <d-switch v-model:checked="showAnimation"></d-switch>
-  </div>
-  
   <d-button ref="origin" style="margin-top: 20px; margin-right: 10px">More</d-button>
   <d-button 
     v-show="trigger === 'manually'" 
@@ -53,6 +58,7 @@
     :closeScope="closeScope"
     :closeOnMouseLeaveMenu="closeOnMouseLeaveMenu"
     :showAnimation="showAnimation"
+    :width="width"
   >
     <ul class="devui-dropdown-menu" role="menu">
       <li role="menuitem">
@@ -84,7 +90,8 @@ export default defineComponent({
       closeScope: ref('blank'),
       closeScopeAreas: ['all', 'blank', 'none'],
       closeOnMouseLeaveMenu: ref(false),
-      showAnimation: ref(true)
+      showAnimation: ref(true),
+      width: ref(100)
     }
   }
 })
@@ -122,6 +129,7 @@ d-dropdown 参数
 | closeScope            | `CloseScopeArea`                     | `all`   | 可选，点击关闭区域，blank 点击非菜单空白才关闭, all 点击菜单内外都关闭，none 菜单内外均不关闭仅下拉按键可以关闭 |
 | closeOnMouseLeaveMenu | `boolean`                            | `false` | 可选，是否进入菜单后离开菜单的时候关闭菜单                                                                      |
 | showAnimation         | `boolean`                            | `true`  | 可选，是否开启动画                                                                                              |
+| width         | `number \| string`                            | `102px`  | 可选，对 dropdown 内容的宽度进行自定义                                                                                              |
 
 TriggerType 类型
 ```typescript