Skip to content

Commit 82bb278

Browse files
cookfrontcookfront
committed
popup component
1 parent 8f474da commit 82bb278

15 files changed

Lines changed: 673 additions & 4 deletions

File tree

‎components.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
"radio": "./packages/radio/index.js",
66
"cell": "./packages/cell/index.js",
77
"icon": "./packages/icon/index.js",
8-
"cell-group": "./packages/cell-group/index.js"
8+
"cell-group": "./packages/cell-group/index.js",
9+
"popup": "./packages/popup/index.js"
910
}

‎docs/examples/popup.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script>
2+
export default {
3+
data() {
4+
return {
5+
popupShow1: false,
6+
popupShow2: false,
7+
popupShow3: false,
8+
popupShow4: false
9+
}
10+
},
11+
12+
watch: {
13+
popupShow2(val) {
14+
if (val) {
15+
setTimeout(() => {
16+
this.popupShow2 = false;
17+
}, 2000);
18+
}
19+
}
20+
}
21+
};
22+
</script>
23+
24+
<style>
25+
.o2-popup-1 {
26+
width: 100%;
27+
height: 200px;
28+
}
29+
30+
.o2-popup-2 {
31+
width: 100%;
32+
line-height: 44px;
33+
background-color: rgba(0, 0, 0, 0.701961);
34+
text-align: center;
35+
color: #fff;
36+
}
37+
38+
.o2-popup-3 {
39+
width: 100%;
40+
height: 100%;
41+
background-color: #fff;
42+
}
43+
44+
.o2-popup-4 {
45+
width: 50%;
46+
height: 200px;
47+
background: #fff;
48+
border-radius: 10px;
49+
}
50+
</style>
51+
52+
## Popup组件
53+
54+
### 基础用法
55+
56+
:::demo
57+
```html
58+
<o2-button @click="popupShow1 = true">从下方弹出popup</o2-button>
59+
<o2-popup v-model="popupShow1" position="bottom" class="o2-popup-1">
60+
xxxx
61+
</o2-popup>
62+
63+
<o2-button @click="popupShow2 = true">从上方方弹出popup</o2-button>
64+
<o2-popup v-model="popupShow2" position="top" class="o2-popup-2" :overlay="false">
65+
更新成功
66+
</o2-popup>
67+
68+
<o2-button @click="popupShow3 = true">从右方弹出popup</o2-button>
69+
<o2-popup v-model="popupShow3" position="right" class="o2-popup-3" :overlay="false">
70+
<o2-button @click.native="popupShow3 = false">关闭 popup</o2-button>
71+
</o2-popup>
72+
73+
<o2-button @click="popupShow4 = true">从中间弹出popup</o2-button>
74+
<o2-popup v-model="popupShow4" transition="popup-fade" class="o2-popup-4">
75+
一些内容
76+
</o2-popup>
77+
```
78+
:::
79+
80+
### API
81+
82+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
83+
|-----------|-----------|-----------|-------------|-------------|
84+
| value | 利用`v-model`绑定当前组件是否显示 | Boolean | '' | |

‎docs/nav.config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@
7777
"title": "Lazyload"
7878
},
7979
{
80-
"path": "/pop",
81-
"title": "Pop"
80+
"path": "/popup",
81+
"title": "Popup"
8282
},
8383
{
8484
"path": "/swipe",

‎packages/popup/CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## 0.0.2 (2017-01-20)
2+
3+
* 改了bug A
4+
* 加了功能B
5+
6+
## 0.0.1 (2017-01-10)
7+
8+
* 第一版

‎packages/popup/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# @youzan/<%= name %>
2+
3+
!!! 请在此处填写你的文档最简单描述 !!!
4+
5+
[![version][version-image]][download-url]
6+
[![download][download-image]][download-url]
7+
8+
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
9+
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
10+
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
11+
12+
## Demo
13+
14+
## Usage
15+
16+
## API
17+
18+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
19+
|-----------|-----------|-----------|-------------|-------------|
20+
| className | 自定义额外类名 | string | '' | '' |
21+
22+
23+
24+
25+
## License
26+
[MIT](https://opensource.org/licenses/MIT)

‎packages/popup/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Popup from './src/popup';
2+
3+
export default Popup;

‎packages/popup/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "<%= name %>",
3+
"version": "<%= version %>",
4+
"description": "<%= description %>",
5+
"main": "./lib/index.js",
6+
"author": "<%= author %>",
7+
"license": "<%= license %>",
8+
"devDependencies": {},
9+
"dependencies": {}
10+
}

‎packages/popup/src/popup.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<transition :name="currentTransition">
3+
<div v-show="currentValue" class="o2-popup" :class="[position ? 'o2-popup--' + position : '']">
4+
<slot></slot>
5+
</div>
6+
</transition>
7+
</template>
8+
9+
<script>
10+
import Popup from 'src/mixins/popup';
11+
12+
export default {
13+
name: 'o2-popup',
14+
15+
mixins: [Popup],
16+
17+
props: {
18+
overlay: {
19+
default: true
20+
},
21+
22+
lockOnScroll: {
23+
default: false
24+
},
25+
26+
closeOnClickOverlay: {
27+
default: true
28+
},
29+
30+
transition: {
31+
type: String,
32+
default: 'popup-slide'
33+
},
34+
35+
position: {
36+
type: String,
37+
default: ''
38+
}
39+
},
40+
41+
data() {
42+
return {
43+
currentValue: false,
44+
currentTransition: this.transition
45+
};
46+
},
47+
48+
watch: {
49+
currentValue(val) {
50+
this.$emit('input', val);
51+
},
52+
53+
value(val) {
54+
this.currentValue = val;
55+
}
56+
},
57+
58+
beforeMount() {
59+
if (this.transition !== 'popup-fade') {
60+
this.currentTransition = `popup-slide-${ this.position }`;
61+
}
62+
},
63+
64+
mounted() {
65+
if (this.value) {
66+
this.currentValue = true;
67+
this.open();
68+
}
69+
}
70+
};
71+
</script>

‎packages/zanui/src/index.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@
55
@import './cell.pcss';
66
@import './field.pcss';
77
@import './icon.pcss';
8+
@import './popup.pcss';
89
@import './switch.pcss';

‎packages/zanui/src/popup.pcss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.v-modal {
2+
position: fixed;
3+
width: 100%;
4+
height: 100%;
5+
top: 0;
6+
left: 0;
7+
background-color: rgba(0, 0, 0, 0.701961);
8+
}
9+
10+
@component-namespace o2 {
11+
@component popup {
12+
position: fixed;
13+
background-color: #fff;
14+
top: 50%;
15+
left: 50%;
16+
transform: translate3d(-50%, -50%, 0);
17+
backface-visibility: hidden;
18+
transition: .2s ease-out;
19+
20+
@modifier top {
21+
top: 0;
22+
right: auto;
23+
bottom: auto;
24+
left: 50%;
25+
transform: translate3d(-50%, 0, 0);
26+
}
27+
28+
@modifier right {
29+
top: 50%;
30+
right: 0;
31+
bottom: auto;
32+
left: auto;
33+
transform: translate3d(0, -50%, 0);
34+
}
35+
36+
@modifier bottom {
37+
top: auto;
38+
bottom: 0;
39+
right: auto;
40+
left: 50%;
41+
transform: translate3d(-50%, 0, 0);
42+
}
43+
44+
@modifier left {
45+
top: 50%;
46+
right: auto;
47+
bottom: auto;
48+
left: 0;
49+
transform: translate3d(0, -50%, 0);
50+
}
51+
}
52+
}
53+
54+
.popup-slide-top-enter,
55+
.popup-slide-top-leave-active {
56+
transform: translate3d(-50%, -100%, 0);
57+
}
58+
59+
.popup-slide-right-enter,
60+
.popup-slide-right-leave-active {
61+
transform: translate3d(100%, -50%, 0);
62+
}
63+
64+
.popup-slide-bottom-enter,
65+
.popup-slide-bottom-leave-active {
66+
transform: translate3d(-50%, 100%, 0);
67+
}
68+
69+
.popup-slide-left-enter, .popup-slide-left-leave-active {
70+
transform: translate3d(-100%, -50%, 0);
71+
}
72+
73+
.popup-fade-enter, .popup-fade-leave-active {
74+
opacity: 0;
75+
}

0 commit comments

Comments
 (0)