test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 11:58:10 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

chore: DropDownButton 支持 hover 触发 (#2774)

Browse Source
This commit is contained in:
吴多益 2021-10-28 17:31:16 +08:00 committed by GitHub
parent dec79820ab
commit 5f42de510c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
docs/zh-CN/components/dropdown-button.md
View File

@ -35,18 +35,51 @@ order: 44
}
```
## 触发方式
> 1.4.0 及以上版本
默认是点击鼠标触发，可以通过 `"trigger": "hover"` 配置为鼠标移上去后触发
```schema
{
"type": "page",
"body": {
"type": "dropdown-button",
"label": "下拉菜单",
"trigger": "hover",
"buttons": [
{
"type": "button",
"label": "按钮1",
"disabled": true
},
{
"type": "button",
"label": "按钮2"
},
{
"type": "button",
"label": "按钮3"
}
]
}
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | --------------- | ----------------- | ----------------------------------------- |
| type | `string` | `dropdown-button` | 类型 |
| label | `string` | | 按钮文本 |
| className | `string` | | 外层 CSS 类名 |
| block | `boolean` | | 块状样式 |
| size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` |
| align | `string` | | 位置，可选`'left'`或`'right'` |
| buttons | `Array<action>` | | 配置下拉按钮 |
| caretIcon | `string` | | caretIcon |
| iconOnly | `boolean` | | 只显示 icon |
| defaultIsOpened | `boolean` | | 默认是否打开 |
| closeOnOutside | `boolean` | | 点击外侧区域是否收起 |
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | ------------------ | ----------------- | ----------------------------------------- |
| type | `string` | `dropdown-button` | 类型 |
| label | `string` | | 按钮文本 |
| className | `string` | | 外层 CSS 类名 |
| block | `boolean` | | 块状样式 |
| size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` |
| align | `string` | | 位置，可选`'left'`或`'right'` |
| buttons | `Array<action>` | | 配置下拉按钮 |
| caretIcon | `string` | | caretIcon |
| iconOnly | `boolean` | | 只显示 icon |
| defaultIsOpened | `boolean` | | 默认是否打开 |
| closeOnOutside | `boolean` | | 点击外侧区域是否收起 |
| trigger | `click` 或 `hover` | `click` | 触发方式 |

16
examples/components/Form/Full.jsx
View File

@ -832,6 +832,22 @@ export default {
{
type: 'divider'
},
{
type: 'input-excel',
label: 'Excel 解析',
name: 'excel'
},
{
type: 'divider'
},
{
type: 'input-kv',
label: 'kv 输入',
name: 'kv'
},
{
type: 'divider'
},
{
type: 'input-image',
name: 'image',

8
src/renderers/DropDownButton.tsx
View File

@ -76,6 +76,11 @@ export interface DropdownButtonSchema extends BaseSchema {
* 是否只显示图标。
*/
iconOnly?: boolean;
/**
* 触发条件，默认是 click
*/
trigger?: 'click' | 'hover';
}
export interface DropDownButtonProps
@ -266,6 +271,7 @@ export default class DropDownButton extends React.Component<
iconOnly,
icon,
isActived,
trigger,
data
} = this.props;
@ -281,6 +287,8 @@ export default class DropDownButton extends React.Component<
},
className
)}
onMouseEnter={trigger === 'hover' ? this.open : () => {}}
onMouseLeave={trigger === 'hover' ? this.close : () => {}}
ref={this.domRef}
>
<TooltipWrapper