From c4c691b20777fe459a24a429b50e0fc8cdbdef85 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sun, 27 Feb 2022 16:25:02 +0800 Subject: [PATCH] feat: dropdown add destroyPopupOnHide & loading --- components/button/button-group.tsx | 3 + .../__tests__/__snapshots__/demo.test.js.snap | 45 ++++++++-- .../dropdown-button.test.js.snap | 4 +- components/dropdown/demo/index.vue | 3 + components/dropdown/demo/loading.vue | 86 +++++++++++++++++++ components/dropdown/dropdown-button.tsx | 10 ++- components/dropdown/index.en-US.md | 8 +- components/dropdown/index.zh-CN.md | 18 ++-- components/dropdown/props.ts | 8 +- components/dropdown/style/index.less | 36 +++++--- components/dropdown/style/rtl.less | 7 +- components/dropdown/style/status.less | 4 +- 12 files changed, 193 insertions(+), 39 deletions(-) create mode 100644 components/dropdown/demo/loading.vue diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx index f263733d6..7f36c1e83 100644 --- a/components/button/button-group.tsx +++ b/components/button/button-group.tsx @@ -34,6 +34,9 @@ export default defineComponent({ case 'small': sizeCls = 'sm'; break; + case 'middle': + case undefined: + break; default: // eslint-disable-next-line no-console console.warn(new UnreachableException(size).error); diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap index c39b69e88..8ca45e165 100644 --- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap +++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap @@ -9,20 +9,20 @@ exports[`renders ./components/dropdown/demo/context-menu.vue correctly 1`] = ` exports[`renders ./components/dropdown/demo/dropdown-button.vue correctly 1`] = `
-
- +
-
- +
-
- +
+ +
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +`; + exports[`renders ./components/dropdown/demo/overlay-visible.vue correctly 1`] = ` Hover me `; exports[`renders ./components/dropdown/demo/placement.vue correctly 1`] = ` diff --git a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap index 03689ae34..0a11a1643 100644 --- a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap +++ b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownButton should support href like Button 1`] = ` -
+
- +
`; diff --git a/components/dropdown/demo/index.vue b/components/dropdown/demo/index.vue index 503cbce1b..599dd86d0 100644 --- a/components/dropdown/demo/index.vue +++ b/components/dropdown/demo/index.vue @@ -9,6 +9,7 @@ + @@ -25,11 +26,13 @@ import OverlayVisible from './overlay-visible.vue'; import Placement from './placement.vue'; import SubMenu from './sub-menu.vue'; import Trigger from './trigger.vue'; +import loadingVue from './loading.vue'; export default defineComponent({ CN, US, components: { + loadingVue, Basic, ContextMenu, DropdownButton, diff --git a/components/dropdown/demo/loading.vue b/components/dropdown/demo/loading.vue new file mode 100644 index 000000000..30cbb6d7d --- /dev/null +++ b/components/dropdown/demo/loading.vue @@ -0,0 +1,86 @@ + +--- +order: 9 +title: + zh-CN: 加载中状态 + en-US: Loading +--- + +## zh-CN + +添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。 + +## en-US + +A loading indicator can be added to a button by setting the `loading` property on the `a-dropdown-button`. + + + + + + diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx index ec0a3b457..d4b0c4da6 100644 --- a/components/dropdown/dropdown-button.tsx +++ b/components/dropdown/dropdown-button.tsx @@ -32,8 +32,9 @@ export default defineComponent({ return () => { const { - type, + type = 'default', disabled, + loading, htmlType, class: className = '', overlay = slots.overlay?.(), @@ -47,6 +48,9 @@ export default defineComponent({ icon = slots.icon?.() || , mouseEnterDelay, mouseLeaveDelay, + overlayClassName, + overlayStyle, + destroyPopupOnHide, onClick, 'onUpdate:visible': _updateVisible, ...restProps @@ -62,12 +66,16 @@ export default defineComponent({ mouseEnterDelay, mouseLeaveDelay, visible, + overlayClassName, + overlayStyle, + destroyPopupOnHide, }; const leftButton = (