github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update dropdown

pull/1790/head
tangjinzhou 2020-02-14 11:23:52 +08:00
parent e7c80606ee
commit ce07ea33de
10 changed files with 65 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = {
dev: {
componentName: 'drawer', // dev components
componentName: 'dropdown', // dev components
},
};

13
components/dropdown/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6,14 +6,21 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
</svg></i></a>
`;
exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `<span class="ant-dropdown-trigger" style="user-select: none;">Right Click on Me</span>`;
exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
<div class="ant-dropdown-trigger" style="text-align: center; background: rgb(247, 247, 247); height: 200px; line-height: 200px; color: rgb(119, 119, 119);">
Right Click on here
</div>
`;
exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
<div>
<div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
</svg></i></button></div>
<div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i slot="icon" aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-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 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 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 0 0 8-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></i></button></div>
<div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
</svg></i></button></div> <button type="button" class="ant-btn ant-dropdown-trigger" style="margin-left: 8px;"><span>Button</span><i aria-label="icon: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<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>

2
components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DropdownButton should support href like Button 1`] = `
<div class="ant-btn-group ant-dropdown-button"><a href="https://ant.design" class="ant-btn ant-btn-default"></a><button type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<div class="ant-btn-group ant-dropdown-button"><a href="https://ant.design" class="ant-btn ant-btn-default"></a><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
</svg></i></button></div>
`;

12
components/dropdown/demo/context-menu.md
View File

@ -11,7 +11,17 @@ The default trigger mode is `hover`, you can change it to `contextMenu`.
```tpl
<template>
<a-dropdown :trigger="['contextmenu']">
<span style="user-select: none">Right Click on Me</span>
<div
:style="{
textAlign: 'center',
background: '#f7f7f7',
height: '200px',
lineHeight: '200px',
color: '#777',
}"
>
Right Click on here
</div>
<a-menu slot="overlay">
<a-menu-item key="1">1st menu item</a-menu-item>
<a-menu-item key="2">2nd menu item</a-menu-item>

13
components/dropdown/demo/dropdown-button.md
View File

@ -1,11 +1,11 @@
<cn>
#### 带下拉框的按钮
左边是按钮，右边是额外的相关功能菜单。
左边是按钮，右边是额外的相关功能菜单。可设置 `icon` 属性来修改右边的图标。
</cn>
<us>
#### Button with dropdown menu
A button is on the left, and a related functional menu is on the right.
A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
</us>
```tpl
@ -19,6 +19,15 @@ A button is on the left, and a related functional menu is on the right.
<a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item>
</a-menu>
</a-dropdown-button>
<a-dropdown-button>
Dropdown
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="1"><a-icon type="user" />1st menu item</a-menu-item>
<a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item>
<a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item>
</a-menu>
<a-icon slot="icon" type="user"/>
</a-dropdown-button>
<a-dropdown-button @click="handleButtonClick" disabled style="margin-left: 8px">
Dropdown
<a-menu slot="overlay" @click="handleMenuClick">

2
components/dropdown/demo/index.vue
View File

@ -19,7 +19,7 @@ const md = {
us: `# Dropdown
A dropdown list.
## When To Use
If there are too many operations to display, you can wrap them in a \`Dropdown\`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.
When there are more than a few options to choose from, you can wrap them in a \`Dropdown\`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
## Examples
`,
};

9
components/dropdown/dropdown-button.jsx
View File

@ -6,6 +6,8 @@ import PropTypes from '../_util/vue-types';
import { hasProp, getComponentFromProp } from '../_util/props-util';
import getDropdownProps from './getDropdownProps';
import { ConfigConsumerProps } from '../config-provider';
import Icon from '../icon';
const ButtonTypesProps = buttonTypes();
const DropdownProps = getDropdownProps();
const ButtonGroup = Button.Group;
@ -19,6 +21,8 @@ const DropdownButtonProps = {
disabled: PropTypes.bool,
prefixCls: PropTypes.string,
placement: DropdownProps.placement.def('bottomRight'),
icon: PropTypes.any,
title: PropTypes.string,
};
export { DropdownButtonProps };
export default {
@ -59,8 +63,10 @@ export default {
placement,
getPopupContainer,
href,
title,
...restProps
} = this.$props;
const icon = getComponentFromProp(this, 'icon') || <Icon type="ellipsis" />;
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
@ -95,12 +101,13 @@ export default {
onClick={this.onClick}
htmlType={htmlType}
href={href}
title={title}
>
{this.$slots.default}
</Button>
<Dropdown {...dropdownProps}>
<template slot="overlay">{getComponentFromProp(this, 'overlay')}</template>
<Button type={type} disabled={disabled} icon="ellipsis" />
<Button type={type}>{icon}</Button>
</Dropdown>
</ButtonGroup>
);

19
components/dropdown/index.en-US.md
View File

@ -27,15 +27,16 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
### Dropdown.Button
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| disabled | whether the dropdown menu is disabled | boolean | - |
| overlay(slot-scope) | the dropdown menu | [Menu](/components/menu) | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| size | size of the button, the same as [Button](/components/button) | string | `default` |
| trigger | the trigger mode which executes the drop-down action | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |
| type | type of the button, the same as [Button](/components/button) | string | `default` |
| visible | whether the dropdown menu is visible | boolean | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | whether the dropdown menu is disabled | boolean | - | |
| icon | Icon (appears on the right) | vNode \| slot | - | 1.5.0 |
| overlay(slot-scope) | the dropdown menu | [Menu](/components/menu) | - | |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| size | size of the button, the same as [Button](/components/button) | string | `default` | |
| trigger | the trigger mode which executes the drop-down action | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` | |
| type | type of the button, the same as [Button](/components/button) | string | `default` | |
| visible | whether the dropdown menu is visible | boolean | - | |
### Dropdown.Button events

19
components/dropdown/index.zh-CN.md
View File

@ -27,15 +27,16 @@
### Dropdown.Button
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - |
| overlay(slot-scope) | 菜单 | [Menu](/components/menu-cn/) | - |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| size | 按钮大小，和 [Button](/components/button-cn/) 一致 | string | 'default' |
| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |
| type | 按钮类型，和 [Button](/components/button-cn/) 一致 | string | 'default' |
| visible(v-model) | 菜单是否显示 | boolean | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - | |
| icon | 右侧的 icon | VNode \| slot | - | 1.5.0 |
| overlay(slot-scope) | 菜单 | [Menu](/components/menu-cn/) | - | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| size | 按钮大小，和 [Button](/components/button-cn/) 一致 | string | 'default' | |
| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` | |
| type | 按钮类型，和 [Button](/components/button-cn/) 一致 | string | 'default' | |
| visible(v-model) | 菜单是否显示 | boolean | - | |
### Dropdown.Button 事件

2
types/dropdown/dropdown-button.d.ts vendored
View File

@ -51,4 +51,6 @@ export declare class DropdownButton extends AntdComponent {
* @type boolean
*/
visible: boolean;
icon: any;
title: string;
}