组件规范 前端代码

Dropdown 下拉菜单

向下弹出的列表。

何时使用#

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

API#

成员说明类型默认值
align弹层相对于trigger的定位, 详见alignBool, String'tl bl'
offset弹层相对于trigger的定位的微调Array[0,0]
visibleOverlay当前显示的状态Boolfalse
defaultVisibleOverlay默认显示的状态Boolfalse
disabled如果是禁用状态，那么trigger不能触发弹层的关闭或者隐藏Boolfalse
delay悬浮状态下延时时间Number200
trigger触发弹层显示或者隐藏的目标ReactElement,HTMLElement
triggerType触发弹层显示或者隐藏的事件String'hover','click','focus'
onVisibleChange在弹层将要显示或者隐藏的时候的触发的事件Function(visible)noop
animation动画的配置Bool,Object{'in':'fadeInDown','out':fadeOutUp}
autoFocus在弹层弹出后是否自动获取焦点Booltrue
hasMask是否带有遮罩Boolfalse
cache在弹层隐藏后是否保留当前的DOMBoolfalse
beforeOpen弹层显示前触发的事件Functionnoop
afterOpen弹层显示后触发的事件Functionnoop
beforeClose弹层关闭前触发的事件Functionnoop
afterClose弹层关闭后触发的事件Functionnoop
onPosition弹层定位完成后触发的事件Function(object, contentNode)noop

代码演示 

import Dropdown from 'blue/lib/dropdown';
import 'blue/lib/dropdown/index.scss';
import 'blue/lib/menu/index.scss';
import Menu from 'blue/lib/menu';

const menu = <Menu>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
</Menu>

ReactDOM.render(
    <Dropdown trigger={<span>Hello dropdown</span>} afterOpen={()=>{console.log(1)}}>
        {menu}
    </Dropdown>
    , mountNode);
基本

最简单的用法。

import Dropdown from 'blue/lib/dropdown';
import 'blue/lib/dropdown/index.scss';
import 'blue/lib/menu/index.scss';
import Menu from 'blue/lib/menu';

const menu = <Menu>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
</Menu>

ReactDOM.render(
<Dropdown trigger={<span>Hello dropdown</span>} triggerType="click">
    {menu}
</Dropdown>, mountNode);
触发的事件类型

可以通过triggerType设置

import Dropdown from 'blue/lib/dropdown';
import 'blue/lib/dropdown/index.scss';
import 'blue/lib/menu/index.scss';
import Menu from 'blue/lib/menu';

const onClick= () => {
    console.log(arguments);
}

const menu = <Menu onClick={onClick}>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
</Menu>, afterOpen = ()=>{ console.log('afterOpen') } ;

ReactDOM.render(
<Dropdown trigger={<span>Hello dropdown</span>} triggerType="click" afterOpen={afterOpen}>
    {menu}
</Dropdown>, mountNode);
事件回调

使用afterOpen来监听dropdown的打开

import Dropdown from 'blue/lib/dropdown';
import 'blue/lib/dropdown/index.scss';
import 'blue/lib/menu/index.scss';
import Menu from 'blue/lib/menu';

const menu = <Menu>
    <Menu.Item>Option 1</Menu.Item>
    <Menu.Item>Option 2</Menu.Item>
    <Menu.Item>Option 3</Menu.Item>
    <Menu.Item>Option 4</Menu.Item>
</Menu>

class App extends React.Component{
    state = {
        visible: true
    }

    render(){
        return <div>
                <p><button onClick={::this.toggleVisible} ref="button">其他的控制按钮控制显示隐藏</button></p>
                <Dropdown trigger={<span>Hello dropdown</span>}
                            visible={this.state.visible}
                        triggerType="click"
                        safeNode = {()=>this.refs.button}
                        onVisibleChange={::this.onVisibleChange}>
                    {menu}
                </Dropdown>
                </div>
    }
    toggleVisible(e){

        this.setState({visible: !this.state.visible});
    }
    onVisibleChange(visible){
        this.setState({ visible });
    }
}

ReactDOM.render(<App/>, mountNode);
从浮层外关闭

使用 visible 属性控制浮层显示,需要使用safeNode将其他控制的按钮告诉dropdown