[new feature] add notify component

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',

docs/src/doc.config.js

@@ -118,6 +118,10 @@ module.exports = {
             {
               path: '/actionsheet',
               title: 'Actionsheet 上拉菜单'
+            },
+            {
+              path: '/notify',
+              title: 'Notify 消息通知'
             }
           ]
         },

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'),

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",

example/pages/dashboard/config.js

@@ -79,6 +79,10 @@ export default {
       {
         name: 'Actionsheet 上拉菜单',
         path: '/pages/actionsheet/index'
+      },
+      {
+        name: 'Notify 消息提示',
+        path: '/pages/notify/index'
       }
     ]
   },

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'
+    });
+  }
+});

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"
+  }
+}

example/pages/notify/index.wxml

@@ -0,0 +1,11 @@
+<demo-block padding title="基础用法">
+  <van-button bind:tap="showNotify">显示消息通知</van-button>
+</demo-block>
+
+<demo-block padding title="自定义配置">
+  <van-button bind:tap="showNotify2">显示自定义消息通知</van-button>
+</demo-block>
+
+<van-notify id="van-notify" />
+<van-notify id="custom-selector" />
+ 

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
+<van-notify id="van-notify" />
+```
+
+### 自定义配置
+
+```js
+Notify({
+  text: '通知内容',
+  duration: 1000,
+  selector: '#custom-selector',
+  backgroundColor: '#38f'
+});
+```
+
+```html
+<van-notify id="custom-selector" />
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| text | 展示文案 | `String` | - |
+| duration | 持续时间 | `Number` | `3000` |
+| selector | 自定义选择器 | `String` | `van-notify` |
+| color | 字体颜色 | `String` | `#fff` | |
+| backgroundColor | 背景色 | `String` | `#e64340` |

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;

packages/notify/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

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);
+  }
+}

packages/notify/index.wxml

@@ -0,0 +1,6 @@
+<view
+  class="van-notify {{ show ? 'van-notify--show' : '' }}"
+  style="background-color:{{ backgroundColor }}"
+>
+  {{ text }}
+</view>