漂浮层 Overlay

示例

基本形式

<overlay>
    <overlay.head><a class="u-btn">head</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>

触发事件

<overlay trigger="click">
    <overlay.head><a class="u-btn">click (Default)</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay trigger="dblclick">
    <overlay.head><a class="u-btn">dblclick</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay trigger="hover">
    <overlay.head><a class="u-btn">hover</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>

展开方向

<overlay direction="top-left">
    <overlay.head><a class="u-btn">top-left</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="top-center">
    <overlay.head><a class="u-btn">top-center</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="top-right">
    <overlay.head><a class="u-btn">top-right</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="bottom-left">
    <overlay.head><a class="u-btn">bottom-left (Default)</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="bottom-center">
    <overlay.head><a class="u-btn">bottom-center</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="bottom-right">
    <overlay.head><a class="u-btn">bottom-right</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<p></p>
<overlay direction="left-top">
    <overlay.head><a class="u-btn">left-top</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="left-center">
    <overlay.head><a class="u-btn">left-center</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="left-bottom">
    <overlay.head><a class="u-btn">left-bottom</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="right-top">
    <overlay.head><a class="u-btn">right-top</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="right-center">
    <overlay.head><a class="u-btn">right-center</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>
<overlay direction="right-bottom">
    <overlay.head><a class="u-btn">right-bottom</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>

禁用

<overlay disabled>
    <overlay.head><a class="u-btn z-dis">disabled</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>

数据绑定

<overlay open={open}>
    <overlay.head><a class="u-btn u-btn-info" z-act={open}>{open ? '展开' : '收起'}</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>

事件

请打开浏览器的控制台查看结果。

<overlay
    on-toggle={console.log('on-toggle:', '$event.open:', $event.open)}
    on-change={console.log('on-change:', '$event.open:', $event.open)}>
    <overlay.head><a class="u-btn u-btn-primary">head</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>

案例

使用样式来处理hover

<overlay class="u-overlay-hover">
    <overlay.head><a class="u-btn u-btn-warning">hover</a></overlay.head>
    <overlay.body><textarea class="u-textarea">body</textarea></overlay.body>
</overlay>

API

Class

Overlay

继承自。

Options

new Overlay()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.open`	boolean	`false`	outside <=> inside	当前为展开/收起状态
`data.trigger`	string	`'click'`	outside => inside	触发方式。支持3种方式：`click`, `dblclick`, `hover`，默认为`click`。空表示不自动触发。
`data.direction`	string	`'bottom-left'`	outside => inside	展开方向。有12种方向：`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`, `left-top`, `left-center`, `left-bottom`, `right-top`, `right-center`, `right-bottom`，默认为`bottom-left`。
`data.readonly`	boolean	`false`	outside => inside	是否只读
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`''`	outside => inside	补充class

Methods

overlay.toggle(open)

展开/收起

参数	类型	默认值	描述
`open`	boolean		展开/收起状态。如果无此参数，则在两种状态之间切换。
返回值	类型	描述
无返回值

Events

overlay.$on('change')

展开/收起状态改变时触发

属性	类型	描述
`sender`	object	事件发送对象
`open`	boolean	改变后的状态
`trigger`	string	触发方式
`direction`	string	展开方向

overlay.$on('toggle')

展开/收起时触发

属性	类型	描述
`sender`	object	事件发送对象
`open`	boolean	展开/收起状态
`trigger`	string	触发方式
`direction`	string	展开方向