[new feature] ActionSheet: add click-overlay event

This commit is contained in:
陈嘉涵 2019-06-10 21:35:31 +08:00
parent a72ce3d115
commit 3c97bb80ac
5 changed files with 16 additions and 1 deletions

View File

@ -2,6 +2,10 @@
### [v2.0.0-beta.5](https://github.com/youzan/vant/tree/v2.0.0-beta.5)
##### ActionSheet
- 新增`click-overlay`事件
##### Field
- 新增`input`插槽

View File

@ -110,6 +110,7 @@ export default {
|------|------|------|
| select | Triggered when click option | item, index |
| cancel | Triggered when cancel click | - |
| click-overlay | Triggered when click overlay | - |
### Data struct of actions

View File

@ -41,6 +41,10 @@ function ActionSheet(
emit(ctx, 'input', value);
}
function onClickOverlay() {
emit(ctx, 'click-overlay');
}
function onCancel() {
emit(ctx, 'input', false);
emit(ctx, 'cancel');
@ -126,6 +130,7 @@ function ActionSheet(
getContainer={props.getContainer}
closeOnClickOverlay={props.closeOnClickOverlay}
onInput={onInput}
onClick-overlay={onClickOverlay}
{...inherit(ctx)}
>
{Header()}

View File

@ -43,6 +43,7 @@ test('callback events', () => {
test('click overlay and close', () => {
const onInput = jest.fn();
const onClickOverlay = jest.fn();
const div = document.createElement('div');
mount({
@ -52,6 +53,7 @@ test('click overlay and close', () => {
:value="true"
:get-container="getContainer"
@input="onInput"
@click-overlay="onClickOverlay"
/>
</div>
`,
@ -64,12 +66,14 @@ test('click overlay and close', () => {
};
},
methods: {
onInput
onInput,
onClickOverlay
}
});
div.querySelector('.van-overlay').click();
expect(onInput).toHaveBeenCalledWith(false);
expect(onClickOverlay).toHaveBeenCalledTimes(1);
});
test('disable lazy-render', () => {

View File

@ -117,6 +117,7 @@ export default {
|------|------|------|
| select | 选中选项时触发,禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
| cancel | 取消按钮点击时触发 | - |
| click-overlay | 点击遮罩层时触发 | - |
### actions