zarm-web

## Dropdown 下拉框下拉框组件。 ### 基础用法目前支持三种触发方式 `click hover contextMenus`,默认值为`click`。 :::demo 通过`visible`属性控制显隐。 ```js constructor(props) { super(props); this.state = { dropdown: false, dropdown2:false, dropdown3:false, dropdown4:false } } render() { const overlay = <Menu> <Menu.Item><Checkbox value="name">姓名</Checkbox></Menu.Item> <Menu.Item><Checkbox value="age">年龄</Checkbox></Menu.Item> <Menu.Item onClick={()=>{ this.setState({ dropdown: false, dropdown2:false, dropdown3:false, dropdown4:false }); }}>点我关闭弹窗</Menu.Item> </Menu>; return ( <div style={{position: 'relative'}}> <Dropdown visible={this.state.dropdown} onVisibleChange={visible => { this.setState({ dropdown: visible }); }} overlay={overlay} > <Button theme="primary"> toggle </Button> </Dropdown> <Dropdown disabled visible={this.state.dropdown2} style={{position: 'absolute', left: 0, top: 36, minWidth: 200}} onVisibleChange={visible => { this.setState({ dropdown2: visible }); }} overlay={overlay} > <Button disabled theme="primary"> disabled </Button> </Dropdown> <Dropdown trigger="hover" visible={this.state.dropdown3} style={{position: 'absolute', left: 0, top: 36, minWidth: 200}} onVisibleChange={visible => { this.setState({ dropdown3: visible }); }} overlay={overlay} > <Button theme="primary"> hover me </Button> </Dropdown> <Dropdown trigger="contextMenu" visible={this.state.dropdown4} style={{position: 'absolute', left: 0, top: 36, minWidth: 200}} onVisibleChange={visible => { this.setState({ dropdown4: visible }); }} overlay={overlay} > <Button theme="primary"> right click me </Button> </Dropdown> </div> ) } ``` ::: ### 弹窗的定位定位信息有6种 `bottomLeft, bottomCenter, bottomRight, topLeft, topCenter, topRight`。通过`placement`控制显示位置 :::demo 通过`placement`属性控制弹窗的位置。 ```js constructor(props) { super(props); this.state = { dropdown: false, dropdown2:false, } } render() { const overlay = <Menu> <Menu.Item><Checkbox value="name">姓名</Checkbox></Menu.Item> <Menu.Item><Checkbox value="age">年龄</Checkbox></Menu.Item> <Menu.Item onClick={()=>{ this.setState({ dropdown: false, dropdown2:false, }); }}>点我关闭当前弹窗</Menu.Item> </Menu>; return ( <div style={{position: 'relative'}}> <Dropdown visible={this.state.dropdown} style={{position: 'absolute', left: 0, top: 36, minWidth: 200}} onVisibleChange={visible => { this.setState({ dropdown: visible }); }} overlay={overlay} > <Button theme="primary"> 点我从下面弹出 </Button> </Dropdown> <Dropdown placement="topLeft" visible={this.state.dropdown2} style={{position: 'absolute', left: 0, top: 36, minWidth: 200}} onVisibleChange={visible => { this.setState({ dropdown2: visible }); }} overlay={overlay} > <Button theme="primary"> 点我从上面弹出 </Button> </Dropdown> </div> ) } ``` ::: ### `onVisibleChange` 参数这个参数为当显示属性发生变化的回调函数为必传项，一般情况下, 我们都需要保持外部数据和内部数据的一致性。参考下面用法 ``` onVisibleChange={(visible)=>{ this.setState({ dropdownVisible: visible }) } } ``` ### 静态方法 ``` Drop.hide(); // 隐藏所有的Dropdown组件 Drop.show(); // 显示所有的Dropdown组件(不包括禁用的组件) Drop.reposition(); // 重新定位所有的组件(不包括隐藏和禁用的组件) ``` ### `notRenderInDisabledMode` 参数当这个参数为true 且 disable参数也为true的时候，将不会渲染弹窗，这会在一些一直都是disabled状态下的组件节省渲染开销，尤其在渲染大量数据的情况下。 ### `className` 和 `style`参数 className 和 style 参数会作用在弹出框的最外层 ui-dropdown节点上。内部的style会覆盖传入的style(若冲突), 会被覆盖的属性有： ``` display // 控制dropdown的显示 left // 控制dropdown的位置 top // 控制dropdown的位置 animationDuration // 控制dropdown动画的事件默认为300 zIndex // 控制组件的显示层级默认为9999 position // 控制组件的定位方式，只能为absolute ``` ### 内部实现设点击的触发组件为 triggerBox, 弹出的组件为 DropdownBox + Dropdown组件在实现的时候，考虑到定位信息的获取，把所有的DropdownBox都动态创建到body的根节点下。然后相对于body进行绝对定位。计算出当前triggerBox的位置然后设置弹出框的绝对定位信息，若父级中有position:fixed样式，则动态创建到该元素下。 + 监听了window.resize事件，当window.resize的时候自动计算目前已弹出的DropdownBox的位置。 + 监听了document的点击事件，当点击外部的时候回自动隐藏DropdownBox。 + 默认在triggerBox和DropdownBox之间有5px的间隙。 + 当trigger参数为hover的时候，鼠标移出之后会延迟300ms后，DropdownBox才会消失，为了让用户在从triggerBox滑到DropdownBox的时候，经过间隙不会直接隐藏DropdownBox。 + DropdownBox的动画效果时长为300ms，目前不支持自定义。 + 当前的弹出框的最小宽度为当前triggerBox的宽度。可以自己设置宽度。 ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | visible | 是否显示 | boolean | - | false | | radius | 是否圆角 | boolean | - | false | | prefixCls | 组件的className | string | - | ui-dropdown| | overlay | 组件弹出层的内容 | ReactElement | - |-| | placement | 组件对齐的方式 | string | bottomLeft, bottomCenter, bottomRight, topLeft, topCenter, topRight| bottomLeft | | className | 弹出层的className | string | - | - | | style | 弹出层的style | React.CSSProperties | - | - | | trigger | 出发弹出框的方式 | string | click hover contextMenu | click | | disabled | 是否禁用弹出框 | boolean | - | false | | zIndex | 当前弹框的zIndex值 | number | - | 9999 | | notRenderInDisabledMode | 在disable为true的时候是否不渲染overlay | boolean | - | false | | onVisibleChange | 显示属性变化时候的回调函数（必传）| (visible:boolean):=> void | - | - | | getPopupContainer | 获取dropdown挂载点的函数（必传）| ():=> HTMLElement | - | - |