何时使用
使用注意
最简单的用法。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 浮层的内容 | any | - |
| type | 样式类型 可选值: 'normal', 'primary' | Enum | 'normal' |
| visible | 弹层当前显示的状态 | Boolean | - |
| defaultVisible | 弹层默认显示的状态 | Boolean | false |
| onVisibleChange | 弹层在显示和隐藏触发的事件 签名: Function(visible: Boolean, type: String) => void 参数: visible: {Boolean} 弹层是否隐藏和显示 type: {String} 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function | func.noop |
| alignEdge | 弹出层对齐方式, 是否为边缘对齐 | Boolean | false |
| closable | 是否显示关闭按钮 | Boolean | true |
| align | 弹出层位置 可选值: 't'(上) 'r'(右) 'b'(下) 'l'(左) 'tl'(上左) 'tr'(上右) 'bl'(下左) 'br'(下右) 'lt'(左上) 'lb'(左下) 'rt'(右上) 'rb'(右下) | Enum | 'b' |
| offset | 弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量 e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px | Array | [0, 0] |
| trigger | 触发元素 | any | <span /> |
| triggerType | 触发行为 鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click | String/Array | 'hover' |
| onClose | 任何visible为false时会触发的事件 签名: Function() => void | Function | func.noop |
| needAdjust | 是否进行自动位置调整 | Boolean | false |
| delay | 弹层在触发以后的延时显示, 单位毫秒 ms | Number | - |
| afterClose | 浮层关闭后触发的事件, 如果有动画，则在动画结束后触发 签名: Function() => void | Function | func.noop |
| shouldUpdatePosition | 强制更新定位信息 | Boolean | - |
| autoFocus | 弹层出现后是否自动focus到内部第一个元素 | Boolean | true |
| safeNode | 安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象 | String | undefined |
| safeId | 用来指定safeNode节点的id，和safeNode配合使用 | String | null |
| animation | 配置动画的播放方式，格式是{in: '', out: ''}， 常用的动画class请查看Animate组件文档 | Object/Boolean | { in: 'zoomIn', out: 'zoomOut', } |
| cache | 弹层的dom节点关闭时是否删除 | Boolean | false |
| popupContainer | 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。 | any | - |
| popupStyle | 弹层组件style，透传给Popup | Object | {} |
| popupClassName | 弹层组件className，透传给Popup | String | '' |
| popupProps | 弹层组件属性，透传给Popup | Object | {} |
| followTrigger | 是否跟随滚动 | Boolean | - |
| id | 弹层id, 传入值才会支持无障碍 | String | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | tooltip的内容 | any | - |
| align | 弹出层位置 可选值: 't'(上) 'r'(右) 'b'(下) 'l'(左) 'tl'(上左) 'tr'(上右) 'bl'(下左) 'br'(下右) 'lt'(左上) 'lb'(左下) 'rt'(右上) 'rb'(右下) | Enum | 'b' |
| trigger | 触发元素 | any | <span /> |
| triggerType | 触发行为 鼠标悬浮, 鼠标点击('hover', 'click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若有复杂交互，推荐使用triggerType为click的Balloon组件 | String/Array | 'hover' |
| popupStyle | 弹层组件style，透传给Popup | Object | - |
| popupClassName | 弹层组件className，透传给Popup | String | - |
| popupProps | 弹层组件属性，透传给Popup | Object | - |
| pure | 是否pure render | Boolean | - |
| popupContainer | 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。 | any | - |
| followTrigger | 是否跟随滚动 | Boolean | - |
| id | 弹层id, 传入值才会支持无障碍 | String | - |
| delay | 如果需要让 Tooltip 内容可被点击，可以设置这个参数，例如 100 | Number | 0 |
鼠标移入、聚集、点击。
位置有十二个方向。
使用 visible ,属性控制浮层显示, 使 balloon 变为受限组件。
使用 visible,属性控制浮层显示, 使 balloon 变为受限组件
浮层中如果又有浮层,比如在 Balloon 中有 DatePicker 的浮层,需要用 safeNode 解决 datePicker 选择时, balloon 浮层关闭的问题.
简化的 Balloon, 只能设置 align, trigger 和 children, 触发条件是 hover.