Skip to content

Commit 21ddc06

Browse files
chenjiahanchenjiahan
committed
[new feature] add notify component
1 parent 131eb39 commit 21ddc06

13 files changed

Lines changed: 196 additions & 0 deletions

File tree

‎docs/src/Preview.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const MAP = {
2525
loading: 'loading-201808092138.png',
2626
'nav-bar': 'nav-bar-201808110751.png',
2727
'notice-bar': 'notice-bar-201808092138.png',
28+
notify: 'notify-201808112050.png',
2829
popup: 'popup-201808092138.png',
2930
panel: 'panel-201808092138.png',
3031
stepper: 'stepper-201808092138.png',

‎docs/src/doc.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,10 @@ module.exports = {
118118
{
119119
path: '/actionsheet',
120120
title: 'Actionsheet 上拉菜单'
121+
},
122+
{
123+
path: '/notify',
124+
title: 'Notify 消息通知'
121125
}
122126
]
123127
},

‎docs/src/docs-entry.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default {
1515
'loading': () => import('../../packages/loading/README.md'),
1616
'nav-bar': () => import('../../packages/nav-bar/README.md'),
1717
'notice-bar': () => import('../../packages/notice-bar/README.md'),
18+
'notify': () => import('../../packages/notify/README.md'),
1819
'panel': () => import('../../packages/panel/README.md'),
1920
'popup': () => import('../../packages/popup/README.md'),
2021
'search': () => import('../../packages/search/README.md'),

‎example/app.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"pages/loading/index",
1313
"pages/nav-bar/index",
1414
"pages/notice-bar/index",
15+
"pages/notify/index",
1516
"pages/panel/index",
1617
"pages/popup/index",
1718
"pages/stepper/index",

‎example/pages/dashboard/config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ export default {
7979
{
8080
name: 'Actionsheet 上拉菜单',
8181
path: '/pages/actionsheet/index'
82+
},
83+
{
84+
name: 'Notify 消息提示',
85+
path: '/pages/notify/index'
8286
}
8387
]
8488
},

‎example/pages/notify/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const Notify = require('../../dist/notify/index');
2+
3+
Page({
4+
showNotify() {
5+
Notify('通知内容');
6+
},
7+
8+
showNotify2() {
9+
Notify({
10+
duration: 1000,
11+
text: '通知内容',
12+
selector: '#custom-selector',
13+
backgroundColor: '#38f'
14+
});
15+
}
16+
});

‎example/pages/notify/index.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"navigationBarTitleText": "Notify 消息通知",
3+
"usingComponents": {
4+
"demo-block": "../../components/demo-block/index",
5+
"van-button": "../../dist/button/index",
6+
"van-notify": "../../dist/notify/index"
7+
}
8+
}

‎example/pages/notify/index.wxml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<demo-block padding title="基础用法">
2+
<van-button bind:tap="showNotify">显示消息通知</van-button>
3+
</demo-block>
4+
5+
<demo-block padding title="自定义配置">
6+
<van-button bind:tap="showNotify2">显示自定义消息通知</van-button>
7+
</demo-block>
8+
9+
<van-notify id="van-notify" />
10+
<van-notify id="custom-selector" />
11+

‎packages/notify/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
## Notify 消息提示
2+
3+
### 使用指南
4+
在 index.json 中引入组件
5+
```json
6+
{
7+
"usingComponents": {
8+
"van-notify": "path/to/zanui-weapp/dist/notify/index"
9+
}
10+
}
11+
```
12+
13+
### 代码演示
14+
15+
### 基础用法
16+
17+
```js
18+
const Notify = require('path/to/zanui-weapp/dist/notify/index');
19+
20+
Notify('通知内容')
21+
```
22+
23+
```html
24+
<van-notify id="van-notify" />
25+
```
26+
27+
### 自定义配置
28+
29+
```js
30+
Notify({
31+
text: '通知内容',
32+
duration: 1000,
33+
selector: '#custom-selector',
34+
backgroundColor: '#38f'
35+
});
36+
```
37+
38+
```html
39+
<van-notify id="custom-selector" />
40+
```
41+
42+
### API
43+
44+
| 参数 | 说明 | 类型 | 默认值 |
45+
|-----------|-----------|-----------|-------------|
46+
| text | 展示文案 | `String` | - |
47+
| duration | 持续时间 | `Number` | `3000` |
48+
| selector | 自定义选择器 | `String` | `van-notify` |
49+
| color | 字体颜色 | `String` | `#fff` | |
50+
| backgroundColor | 背景色 | `String` | `#e64340` |

‎packages/notify/index.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
Component({
2+
properties: {
3+
text: String,
4+
color: {
5+
type: String,
6+
value: '#fff'
7+
},
8+
backgroundColor: {
9+
type: String,
10+
value: '#e64340'
11+
},
12+
duration: {
13+
type: Number,
14+
value: 3000
15+
}
16+
},
17+
18+
methods: {
19+
show() {
20+
const { duration } = this.data;
21+
22+
clearTimeout(this.timer);
23+
this.setData({
24+
show: true
25+
});
26+
27+
if (duration > 0 && duration !== Infinity) {
28+
this.timer = setTimeout(() => {
29+
this.hide();
30+
}, duration);
31+
}
32+
},
33+
34+
hide() {
35+
clearTimeout(this.timer);
36+
this.setData({
37+
show: false
38+
});
39+
}
40+
}
41+
});
42+
43+
const defaultOptions = {
44+
selector: '#van-notify',
45+
duration: 3000
46+
};
47+
48+
function Notify(options = {}) {
49+
const pages = getCurrentPages();
50+
const ctx = pages[pages.length - 1];
51+
52+
options = Object.assign({}, defaultOptions, parseParam(options));
53+
54+
const el = ctx.selectComponent(options.selector);
55+
delete options.selector;
56+
57+
if (el) {
58+
el.setData({
59+
...options
60+
});
61+
el.show();
62+
}
63+
}
64+
65+
function parseParam(params = '') {
66+
return typeof params === 'object' ? params : { text: params };
67+
}
68+
69+
module.exports = Notify;

0 commit comments

Comments
 (0)