Browse Source

Notification: add offset

kingwl 8 years ago
parent
commit
5aa4c5f00a
2 changed files with 39 additions and 1 deletions
  1. 37 0
      examples/docs/zh-CN/notification.md
  2. 2 1
      packages/notification/src/main.js

+ 37 - 0
examples/docs/zh-CN/notification.md

@@ -45,6 +45,13 @@
           message: '这是一条错误的提示消息'
         });
       },
+      
+      open7() {
+        this.$notify({
+         message: '吴尔丹',
+         origin: 100
+       });
+      },
 
       onClose() {
         console.log('Notification 已关闭');
@@ -166,6 +173,35 @@
 ```
 :::
 
+### 带有偏移
+
+让 Notification 偏移一些位置
+
+::: demo Element Notification 组件提供设置偏移量的功能, 通过设置 `origin` 字段,可以使弹出的消息距屏幕上方偏移一段距离, 在同一时刻,所有的 Notification 实例应当只有同一个偏移量。
+```html
+<template>
+  <el-button
+    plain
+    @click="open7">
+    偏移的消息
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify({
+         message: '吴尔丹',
+         origin: 100
+       });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 全局方法
 
 Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
@@ -188,6 +224,7 @@ import { Notification } from 'element-ui';
 | type | 主题样式,如果不在可选值内将被忽略 | string | success/warning/info/error | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
 | onClose | 关闭时的回调函数 | function | — | — |
+| origin | 偏移的距离,在同一时刻,所有的 Notification 实例应当只有同一个偏移量 | number | — | 0 |
 
 ### 方法
 调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 `close` 方法。

+ 2 - 1
packages/notification/src/main.js

@@ -25,7 +25,8 @@ var Notification = function(options) {
   instance.dom = instance.vm.$el;
   instance.dom.style.zIndex = PopupManager.nextZIndex();
 
-  let topDist = 0;
+  const origin = options.origin || 0;
+  let topDist = origin;
   for (let i = 0, len = instances.length; i < len; i++) {
     topDist += instances[i].$el.offsetHeight + 16;
   }