feat: dropdown add destroyPopupOnHide & loading
tangjinzhou
parent
259f5fdef6
commit
c4c691b207
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@ exports[`renders ./components/dropdown/demo/context-menu.vue correctly 1`] = `
|
|||
|
||||
exports[`renders ./components/dropdown/demo/dropdown-button.vue correctly 1`] = `
|
||||
<div class="demo-dropdown-wrap">
|
||||
<div class="ant-btn-group ant-dropdown-button"><button class="ant-btn ant-btn-default" type="button">
|
||||
<div class="ant-btn-group ant-dropdown-button"><button class="ant-btn" type="button">
|
||||
<!----><span>Dropdown</span>
|
||||
</button>
|
||||
<!----><button class="ant-btn ant-btn-default ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
<!----><button class="ant-btn ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
</div>
|
||||
<div class="ant-btn-group ant-dropdown-button"><button class="ant-btn ant-btn-default" type="button">
|
||||
<div class="ant-btn-group ant-dropdown-button"><button class="ant-btn" type="button">
|
||||
<!----><span>Dropdown</span>
|
||||
</button>
|
||||
<!----><button class="ant-btn ant-btn-default ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></button>
|
||||
<!----><button class="ant-btn ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></button>
|
||||
</div>
|
||||
<div class="ant-btn-group ant-dropdown-button"><button disabled="" class="ant-btn ant-btn-default" type="button">
|
||||
<div class="ant-btn-group ant-dropdown-button"><button disabled="" class="ant-btn" type="button">
|
||||
<!----><span>Dropdown</span>
|
||||
</button>
|
||||
<!----><button class="ant-btn ant-btn-default ant-dropdown-trigger ant-btn-icon-only" disabled="" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
<!----><button class="ant-btn ant-dropdown-trigger ant-btn-icon-only" disabled="" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
</div>
|
||||
<!----><button class="ant-btn ant-dropdown-trigger" type="button">
|
||||
<!----><span>Button</span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
|
||||
|
|
@ -34,6 +34,39 @@ exports[`renders ./components/dropdown/demo/event.vue correctly 1`] = `<!----><a
|
|||
|
||||
exports[`renders ./components/dropdown/demo/item.vue correctly 1`] = `<!----><a class="ant-dropdown-link ant-dropdown-trigger"> Hover me <span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></a>`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/loading.vue correctly 1`] = `
|
||||
<div class="ant-space ant-space-vertical">
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-btn-group ant-dropdown-button"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span>Submit</span></button>
|
||||
<!----><button class="ant-btn ant-btn-primary ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-btn-group ant-btn-group-sm ant-dropdown-button"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span>Submit</span></button>
|
||||
<!----><button class="ant-btn ant-btn-primary ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item" style="margin-bottom: 8px;">
|
||||
<div class="ant-btn-group ant-dropdown-button"><button class="ant-btn ant-btn-primary" type="button">
|
||||
<!----><span>Submit</span>
|
||||
</button>
|
||||
<!----><button class="ant-btn ant-btn-primary ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div class="ant-btn-group ant-dropdown-button"><button class="ant-btn" type="button">
|
||||
<!----><span>Submit</span>
|
||||
</button>
|
||||
<!----><button class="ant-btn ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/overlay-visible.vue correctly 1`] = `<!----><a class="ant-dropdown-link ant-dropdown-trigger"> Hover me <span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></a>`;
|
||||
|
||||
exports[`renders ./components/dropdown/demo/placement.vue correctly 1`] = `
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`DropdownButton should support href like Button 1`] = `
|
||||
<div class="ant-btn-group ant-dropdown-button"><a class="ant-btn ant-btn-default" href="https://ant.design">
|
||||
<div class="ant-btn-group ant-dropdown-button"><a class="ant-btn" href="https://ant.design">
|
||||
<!---->
|
||||
</a>
|
||||
<!----><button class="ant-btn ant-btn-default ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
<!----><button class="ant-btn ant-dropdown-trigger ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<placement />
|
||||
<sub-menu />
|
||||
<trigger />
|
||||
<loadingVue />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
<docs>
|
||||
---
|
||||
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`.
|
||||
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical">
|
||||
<a-dropdown-button type="primary" loading>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1">Submit and continue</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
Submit
|
||||
</a-dropdown-button>
|
||||
<a-dropdown-button type="primary" size="small" loading>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1">Submit and continue</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
Submit
|
||||
</a-dropdown-button>
|
||||
<a-dropdown-button type="primary" :loading="loading1" @click="enterLoading1">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1">Submit and continue</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
Submit
|
||||
</a-dropdown-button>
|
||||
<a-dropdown-button :loading="loading2" @click="enterLoading2">
|
||||
Submit
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1">Submit and continue</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<template #icon><DownOutlined /></template>
|
||||
</a-dropdown-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, Ref, ref } from 'vue';
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
},
|
||||
setup() {
|
||||
const loading1 = ref(false);
|
||||
const loading2 = ref(false);
|
||||
const enterLoading = (loading: Ref<boolean>) => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 6000);
|
||||
};
|
||||
return {
|
||||
loading1,
|
||||
loading2,
|
||||
enterLoading1() {
|
||||
enterLoading(loading1);
|
||||
},
|
||||
enterLoading2() {
|
||||
enterLoading(loading2);
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -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?.() || <EllipsisOutlined />,
|
||||
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 = (
|
||||
<Button
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
loading={loading}
|
||||
onClick={onClick}
|
||||
htmlType={htmlType}
|
||||
href={href}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,9 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
|||
### Dropdown
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | whether the dropdown menu is disabled | boolean | - |
|
||||
| destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false | |
|
||||
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
|
||||
| overlay(v-slot) | the dropdown menu | [Menu](/components/menu) | - |
|
||||
| overlayClassName | Class name of the dropdown root element | string | - |
|
||||
|
|
@ -30,7 +31,7 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
|||
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | function(visible) |
|
||||
| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed. Not trigger when hidden by click item | function(visible) |
|
||||
|
||||
You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
|
||||
|
||||
|
|
@ -43,6 +44,7 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
|
|||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | whether the dropdown menu is disabled | boolean | - | |
|
||||
| loading | Set the loading status of button | boolean \| { delay: number } | false | 3.0 |
|
||||
| icon | Icon (appears on the right) | vNode \| slot | - | 1.5.0 |
|
||||
| overlay(v-slot) | the dropdown menu | [Menu](/components/menu) | - | |
|
||||
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
|
||||
|
|
@ -56,4 +58,4 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
|
|||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| click | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function |
|
||||
| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function |
|
||||
| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed. Not trigger when hidden by click item | Function |
|
||||
|
|
|
|||
|
|
@ -20,8 +20,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
|||
属性如下
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | 菜单是否禁用 | boolean | - |
|
||||
| destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | 3.0 |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | `() => document.body` |
|
||||
| overlay(v-slot) | 菜单 | [Menu](/components/menu-cn) | - |
|
||||
| overlayClassName | 下拉根元素的类名称 | string | - |
|
||||
|
|
@ -38,15 +39,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
|||
|
||||
### 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | -------------------------------------- | ----------------- |
|
||||
| visibleChange | 菜单显示状态改变时调用，参数为 visible | function(visible) |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| visibleChange | 菜单显示状态改变时调用，参数为 visible。。点击菜单按钮导致的消失不会触发 | function(visible) |
|
||||
|
||||
### Dropdown.Button
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | 菜单是否禁用 | boolean | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | 3.0 |
|
||||
| icon | 右侧的 icon | VNode \| slot | - | 1.5.0 |
|
||||
| overlay(v-slot) | 菜单 | [Menu](/components/menu-cn/) | - | |
|
||||
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
|
||||
|
|
@ -57,7 +59,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
|||
|
||||
### Dropdown.Button 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | ------------------------------------------------------------ | ----------------- |
|
||||
| click | 点击左侧按钮的回调，和 [Button](/components/button-cn/) 一致 | Function |
|
||||
| visibleChange | 菜单显示状态改变时调用，参数为 visible | function(visible) |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击左侧按钮的回调，和 [Button](/components/button-cn/) 一致 | Function |
|
||||
| visibleChange | 菜单显示状态改变时调用，参数为 visible。。点击菜单按钮导致的消失不会触发 | function(visible) |
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ const dropdownProps = () => ({
|
|||
mouseLeaveDelay: PropTypes.number,
|
||||
openClassName: PropTypes.string,
|
||||
minOverlayWidthMatchTrigger: PropTypes.looseBool,
|
||||
destroyPopupOnHide: PropTypes.looseBool,
|
||||
onVisibleChange: {
|
||||
type: Function as PropType<(val: boolean) => void>,
|
||||
},
|
||||
|
|
@ -49,17 +50,18 @@ const dropdownProps = () => ({
|
|||
},
|
||||
});
|
||||
|
||||
const ButtonTypesProps = buttonTypes();
|
||||
const buttonTypesProps = buttonTypes();
|
||||
const dropdownButtonProps = () => ({
|
||||
...dropdownProps(),
|
||||
type: ButtonTypesProps.type,
|
||||
type: buttonTypesProps.type,
|
||||
size: PropTypes.oneOf(tuple('small', 'large')),
|
||||
htmlType: ButtonTypesProps.htmlType,
|
||||
htmlType: buttonTypesProps.htmlType,
|
||||
href: PropTypes.string,
|
||||
disabled: PropTypes.looseBool,
|
||||
prefixCls: PropTypes.string,
|
||||
icon: PropTypes.any,
|
||||
title: PropTypes.string,
|
||||
loading: buttonTypesProps.loading,
|
||||
onClick: {
|
||||
type: Function as PropType<MouseEventHandler>,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -80,19 +80,19 @@
|
|||
&-placement-topLeft > &-arrow,
|
||||
&-placement-topRight > &-arrow {
|
||||
bottom: @popover-distance - @popover-arrow-width + 2.2px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: @popover-bg;
|
||||
border-bottom-color: @popover-bg;
|
||||
border-left-color: transparent;
|
||||
border-color: transparent @popover-bg @popover-bg transparent;
|
||||
box-shadow: 3px 3px 7px fade(@black, 7%);
|
||||
}
|
||||
|
||||
&-placement-topCenter > &-arrow {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&-placement-topLeft > &-arrow {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&-placement-topRight > &-arrow {
|
||||
right: 16px;
|
||||
}
|
||||
|
|
@ -101,19 +101,19 @@
|
|||
&-placement-bottomLeft > &-arrow,
|
||||
&-placement-bottomRight > &-arrow {
|
||||
top: @popover-distance - @popover-arrow-width + 2px;
|
||||
border-top-color: @popover-bg;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: @popover-bg;
|
||||
border-color: @popover-bg transparent transparent @popover-bg;
|
||||
box-shadow: -2px -2px 5px fade(@black, 6%);
|
||||
}
|
||||
|
||||
&-placement-bottomCenter > &-arrow {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&-placement-bottomLeft > &-arrow {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&-placement-bottomRight > &-arrow {
|
||||
right: 16px;
|
||||
}
|
||||
|
|
@ -341,10 +341,21 @@
|
|||
.@{dropdown-prefix-cls}-button {
|
||||
white-space: nowrap;
|
||||
|
||||
&.@{ant-prefix}-btn-group
|
||||
> .@{ant-prefix}-btn:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
|
||||
padding-right: @padding-xs;
|
||||
padding-left: @padding-xs;
|
||||
&.@{ant-prefix}-btn-group > .@{ant-prefix}-btn {
|
||||
&-loading,
|
||||
&-loading + .@{ant-prefix}-btn {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-loading + .@{ant-prefix}-btn::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
|
||||
padding-right: @padding-xs;
|
||||
padding-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -362,6 +373,7 @@
|
|||
.@{dropdown-prefix-cls}-menu-submenu-arrow::after {
|
||||
color: @text-color-secondary-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @text-color-inverse;
|
||||
background: transparent;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
}
|
||||
|
||||
&-item-group-title {
|
||||
.@{dropdown-prefix-cls}-rtl & {
|
||||
.@{dropdown-prefix-cls}-rtl &,
|
||||
.@{dropdown-prefix-cls}-menu-submenu-rtl & {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -55,13 +56,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{dropdown-prefix-cls}-menu-submenu-arrow {
|
||||
.@{dropdown-prefix-cls}-menu-submenu-expand-icon {
|
||||
.@{dropdown-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: @padding-xs;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
|
||||
.@{dropdown-prefix-cls}-rtl & {
|
||||
margin-left: 0 !important;
|
||||
transform: scaleX(-1);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
@import './index';
|
||||
@import (reference) '../../style/themes/index';
|
||||
|
||||
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
|
||||
|
||||
.@{dropdown-prefix-cls}-menu-item {
|
||||
&&-danger {
|
||||
|
|
|
|||
Loading…
Reference in New Issue