blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] add overlay component

Browse Source
This commit is contained in:
陈嘉涵 2019-07-06 15:18:37 +08:00
parent 22c1b14bc2
commit f6e69f3caa
11 changed files with 280 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/site/doc.config.js
View File

@ -197,6 +197,10 @@ export default {
path: '/notify',
title: 'Notify 消息通知'
},
{
path: '/overlay',
title: 'Overlay 遮罩层'
},
{
path: '/pull-refresh',
title: 'PullRefresh 下拉刷新'
@ -527,6 +531,10 @@ export default {
path: '/notify',
title: 'Notify'
},
{
path: '/overlay',
title: 'Overlay 遮罩层'
},
{
path: '/pull-refresh',
title: 'PullRefresh'

10
src/dropdown-menu/test/__snapshots__/index.spec.js.snap
View File

@ -37,7 +37,7 @@ exports[`close on click outside 1`] = `
<div class="van-cell__title"><span>B</span></div>
</div>
</div>
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
</div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
@ -83,7 +83,7 @@ exports[`direction up 1`] = `
<div class="van-cell__title"><span>B</span></div>
</div>
</div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
</div>
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
<!---->
@ -115,7 +115,7 @@ exports[`show dropdown item 1`] = `
<div class="van-cell__title"><span>B</span></div>
</div>
</div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
</div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
@ -150,7 +150,7 @@ exports[`show dropdown item 2`] = `
<div class="van-cell__title"><span>B</span></div>
</div>
</div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
</div>
</div>
`;
@ -182,7 +182,7 @@ exports[`show dropdown item 3`] = `
<div class="van-cell__title"><span>B</span></div>
</div>
</div>
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
</div>
</div>
`;

4
src/mixins/popup/overlay.ts
View File

@ -50,10 +50,10 @@ export function updateOverlay(): void {
}
Object.assign(overlay, defaultConfig, config, {
visible: true
show: true
});
} else {
overlay.visible = false;
overlay.show = false;
}
}

53
src/overlay/README.md Normal file
View File

@ -0,0 +1,53 @@
# Overlay
### Install
``` javascript
import { Overlay } from 'vant';
Vue.use(Overlay);
```
## Usage
### Basic Usage
```html
<van-button
type="primary"
text="Show Overlay"
@click="show = true"
/>
<van-overlay
:show="show"
@click="show = false"
/>
```
```js
export default {
data() {
return {
show: false
}
}
},
```
## API
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| show | Whether to show overlay | `Boolean` | `false` |
| z-index | z-index | `Number | String` | `1` |
| duration | Animation duration | `Number | String` | `0.3` |
| class-name | ClassName | `String` | - |
### Events
| Event | Description | Arguments |
|------|------|------|
| click | Triggered when clicked | - |

57
src/overlay/README.zh-CN.md Normal file
View File

@ -0,0 +1,57 @@
# Overlay 遮罩层
### 介绍
创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
### 引入
``` javascript
import { Overlay } from 'vant';
Vue.use(Overlay);
```
## 代码演示
### 基础用法
```html
<van-button
type="primary"
text="显示遮罩层"
@click="show = true"
/>
<van-overlay
:show="show"
@click="show = false"
/>
```
```js
export default {
data() {
return {
show: false
}
}
},
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| show | 是否展示遮罩层 | `Boolean` | `false` | - |
| z-index | z-index 层级 | `Number | String` | `1` | - |
| duration | 动画时长，单位秒 | `Number | String` | `0.3` | - |
| class-name | 自定义类名 | `String` | - | - |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| click | 点击时触发 | - |

74
src/overlay/demo/index.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button
type="primary"
:text="$t('showOverlay')"
style="margin-left: 15px;"
@click="show = true"
/>
<van-overlay
:show="show"
@click="show = false"
/>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
showOverlay: '显示遮罩层'
},
'en-US': {
showOverlay: 'Show Overlay'
}
},
data() {
return {
show: false
};
}
};
</script>
<style lang="less">
.demo-skeleton {
background-color: #fff;
.van-switch {
margin: 0 15px 10px;
}
.demo-preview {
display: flex;
padding: 0 15px;
.demo-content {
padding-top: 6px;
h3 {
margin: 0;
font-size: 18px;
line-height: 20px;
}
p {
margin: 13px 0 0;
font-size: 14px;
line-height: 20px;
}
}
img {
flex-shrink: 0;
width: 32px;
height: 32px;
margin-right: 15px;
}
}
}
</style>

21
src/overlay/index.tsx
View File

@ -7,11 +7,11 @@ import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/types';
export type OverlayProps = {
zIndex?: number;
show?: boolean;
zIndex?: number | string;
duration: number | string | null;
className?: any;
visible?: boolean;
duration: number | null;
customStyle?: object;
customStyle?: any;
};
export type OverlayEvents = {
@ -42,7 +42,7 @@ function Overlay(
return (
<transition name="van-fade">
<div
vShow={props.visible}
vShow={props.show}
style={style}
class={[bem(), props.className]}
onTouchmove={preventTouchMove}
@ -53,12 +53,15 @@ function Overlay(
}
Overlay.props = {
zIndex: Number,
show: Boolean,
className: null as any,
visible: Boolean,
customStyle: Object,
customStyle: null as any,
zIndex: {
type: [Number, String],
default: 1
},
duration: {
type: Number,
type: [Number, String],
default: null
}
};

9
src/overlay/test/__snapshots__/demo.spec.js.snap Normal file
View File

@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">显示遮罩层</span></button>
<div class="van-overlay" style="z-index: 1; display: none;" name="van-fade"></div>
</div>
</div>
`;

7
src/overlay/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`class-name prop 1`] = `<div class="van-overlay my-overlay" style="z-index: 1;" name="van-fade"></div>`;
exports[`duration prop 1`] = `<div class="van-overlay" style="z-index: 1; animation-duration: 1s;" name="van-fade"></div>`;
exports[`z-index prop 1`] = `<div class="van-overlay" style="z-index: 99;" name="van-fade"></div>`;

4
src/overlay/test/demo.spec.js Normal file
View File

@ -0,0 +1,4 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);

49
src/overlay/test/index.spec.js Normal file
View File

@ -0,0 +1,49 @@
import { mount } from '../../../test/utils';
import Overlay from '..';
test('z-index prop', () => {
const wrapper = mount(Overlay, {
propsData: {
show: true,
zIndex: 99
}
});
expect(wrapper).toMatchSnapshot();
});
test('class-name prop', () => {
const wrapper = mount(Overlay, {
propsData: {
show: true,
className: 'my-overlay'
}
});
expect(wrapper).toMatchSnapshot();
});
test('duration prop', () => {
const wrapper = mount(Overlay, {
propsData: {
show: true,
duration: 1
}
});
expect(wrapper).toMatchSnapshot();
});
test('click event', () => {
const onClick = jest.fn();
const wrapper = mount(Overlay, {
context: {
on: {
click: onClick
}
}
});
wrapper.trigger('click');
expect(onClick).toHaveBeenCalledTimes(1);
});