From 21ddc06dcb83d75673ffecbba62fae49e151f3e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Sat, 11 Aug 2018 20:51:59 +0800 Subject: [PATCH] [new feature] add notify component --- docs/src/Preview.vue | 1 + docs/src/doc.config.js | 4 ++ docs/src/docs-entry.js | 1 + example/app.json | 1 + example/pages/dashboard/config.js | 4 ++ example/pages/notify/index.js | 16 +++++++ example/pages/notify/index.json | 8 ++++ example/pages/notify/index.wxml | 11 +++++ packages/notify/README.md | 50 ++++++++++++++++++++++ packages/notify/index.js | 69 +++++++++++++++++++++++++++++++ packages/notify/index.json | 3 ++ packages/notify/index.pcss | 22 ++++++++++ packages/notify/index.wxml | 6 +++ 13 files changed, 196 insertions(+) create mode 100644 example/pages/notify/index.js create mode 100644 example/pages/notify/index.json create mode 100644 example/pages/notify/index.wxml create mode 100644 packages/notify/README.md create mode 100644 packages/notify/index.js create mode 100644 packages/notify/index.json create mode 100644 packages/notify/index.pcss create mode 100644 packages/notify/index.wxml diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue index ba46e182..4102681d 100644 --- a/docs/src/Preview.vue +++ b/docs/src/Preview.vue @@ -25,6 +25,7 @@ const MAP = { loading: 'loading-201808092138.png', 'nav-bar': 'nav-bar-201808110751.png', 'notice-bar': 'notice-bar-201808092138.png', + notify: 'notify-201808112050.png', popup: 'popup-201808092138.png', panel: 'panel-201808092138.png', stepper: 'stepper-201808092138.png', diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 18e622fc..304576b3 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -118,6 +118,10 @@ module.exports = { { path: '/actionsheet', title: 'Actionsheet 上拉菜单' + }, + { + path: '/notify', + title: 'Notify 消息通知' } ] }, diff --git a/docs/src/docs-entry.js b/docs/src/docs-entry.js index 17c97b7b..fe221df2 100644 --- a/docs/src/docs-entry.js +++ b/docs/src/docs-entry.js @@ -15,6 +15,7 @@ export default { 'loading': () => import('../../packages/loading/README.md'), 'nav-bar': () => import('../../packages/nav-bar/README.md'), 'notice-bar': () => import('../../packages/notice-bar/README.md'), + 'notify': () => import('../../packages/notify/README.md'), 'panel': () => import('../../packages/panel/README.md'), 'popup': () => import('../../packages/popup/README.md'), 'search': () => import('../../packages/search/README.md'), diff --git a/example/app.json b/example/app.json index b60928fa..fc06d523 100644 --- a/example/app.json +++ b/example/app.json @@ -12,6 +12,7 @@ "pages/loading/index", "pages/nav-bar/index", "pages/notice-bar/index", + "pages/notify/index", "pages/panel/index", "pages/popup/index", "pages/stepper/index", diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js index 44bb7f31..29e3681b 100644 --- a/example/pages/dashboard/config.js +++ b/example/pages/dashboard/config.js @@ -79,6 +79,10 @@ export default { { name: 'Actionsheet 上拉菜单', path: '/pages/actionsheet/index' + }, + { + name: 'Notify 消息提示', + path: '/pages/notify/index' } ] }, diff --git a/example/pages/notify/index.js b/example/pages/notify/index.js new file mode 100644 index 00000000..d874dbe1 --- /dev/null +++ b/example/pages/notify/index.js @@ -0,0 +1,16 @@ +const Notify = require('../../dist/notify/index'); + +Page({ + showNotify() { + Notify('通知内容'); + }, + + showNotify2() { + Notify({ + duration: 1000, + text: '通知内容', + selector: '#custom-selector', + backgroundColor: '#38f' + }); + } +}); diff --git a/example/pages/notify/index.json b/example/pages/notify/index.json new file mode 100644 index 00000000..ed738449 --- /dev/null +++ b/example/pages/notify/index.json @@ -0,0 +1,8 @@ +{ + "navigationBarTitleText": "Notify 消息通知", + "usingComponents": { + "demo-block": "../../components/demo-block/index", + "van-button": "../../dist/button/index", + "van-notify": "../../dist/notify/index" + } +} diff --git a/example/pages/notify/index.wxml b/example/pages/notify/index.wxml new file mode 100644 index 00000000..b9a2ee42 --- /dev/null +++ b/example/pages/notify/index.wxml @@ -0,0 +1,11 @@ + + 显示消息通知 + + + + 显示自定义消息通知 + + + + + \ No newline at end of file diff --git a/packages/notify/README.md b/packages/notify/README.md new file mode 100644 index 00000000..f5db7961 --- /dev/null +++ b/packages/notify/README.md @@ -0,0 +1,50 @@ +## Notify 消息提示 + +### 使用指南 +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "van-notify": "path/to/zanui-weapp/dist/notify/index" + } +} +``` + +### 代码演示 + +### 基础用法 + +```js +const Notify = require('path/to/zanui-weapp/dist/notify/index'); + +Notify('通知内容') +``` + +```html + +``` + +### 自定义配置 + +```js +Notify({ + text: '通知内容', + duration: 1000, + selector: '#custom-selector', + backgroundColor: '#38f' +}); +``` + +```html + +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| text | 展示文案 | `String` | - | +| duration | 持续时间 | `Number` | `3000` | +| selector | 自定义选择器 | `String` | `van-notify` | +| color | 字体颜色 | `String` | `#fff` | | +| backgroundColor | 背景色 | `String` | `#e64340` | diff --git a/packages/notify/index.js b/packages/notify/index.js new file mode 100644 index 00000000..de20e1a2 --- /dev/null +++ b/packages/notify/index.js @@ -0,0 +1,69 @@ +Component({ + properties: { + text: String, + color: { + type: String, + value: '#fff' + }, + backgroundColor: { + type: String, + value: '#e64340' + }, + duration: { + type: Number, + value: 3000 + } + }, + + methods: { + show() { + const { duration } = this.data; + + clearTimeout(this.timer); + this.setData({ + show: true + }); + + if (duration > 0 && duration !== Infinity) { + this.timer = setTimeout(() => { + this.hide(); + }, duration); + } + }, + + hide() { + clearTimeout(this.timer); + this.setData({ + show: false + }); + } + } +}); + +const defaultOptions = { + selector: '#van-notify', + duration: 3000 +}; + +function Notify(options = {}) { + const pages = getCurrentPages(); + const ctx = pages[pages.length - 1]; + + options = Object.assign({}, defaultOptions, parseParam(options)); + + const el = ctx.selectComponent(options.selector); + delete options.selector; + + if (el) { + el.setData({ + ...options + }); + el.show(); + } +} + +function parseParam(params = '') { + return typeof params === 'object' ? params : { text: params }; +} + +module.exports = Notify; diff --git a/packages/notify/index.json b/packages/notify/index.json new file mode 100644 index 00000000..32640e0d --- /dev/null +++ b/packages/notify/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/packages/notify/index.pcss b/packages/notify/index.pcss new file mode 100644 index 00000000..25ce5487 --- /dev/null +++ b/packages/notify/index.pcss @@ -0,0 +1,22 @@ +@import '../common/style/var.pcss'; + +.van-notify { + top: 0; + opacity: 0; + width: 100%; + z-index: 110; + color: $white; + position: fixed; + min-height: 32px; + line-height: 2.3; + font-size: 14px; + text-align: center; + background-color: #E64340; + transition: all 0.4s ease; + transform: translateZ(0) translateY(-100%); + + &--show { + opacity: 1; + transform: translateZ(0) translateY(0); + } +} diff --git a/packages/notify/index.wxml b/packages/notify/index.wxml new file mode 100644 index 00000000..5fc9f597 --- /dev/null +++ b/packages/notify/index.wxml @@ -0,0 +1,6 @@ + + {{ text }} +