Merge pull request ElemeFE#7 from Leopoldthecoder/notification

Notification

examples/service/notification.vue

@@ -0,0 +1,45 @@
+<template>
+  <d-button @click="notification1">Notification 1</d-button>
+  <d-button @click="notification2">Notification 2</d-button>
+  <d-button @click="notification3">Notification 3</d-button>
+  <d-button @click="notification4">Notification 4</d-button>
+</template>
+
+<script type="text/ecmascript-6" lang="babel">
+  import { Notification } from '../../src/index.js'
+  export default {
+    methods: {
+      notification1() {
+        Notification({
+          title: '通知',
+          message: '通知信息'
+        });
+      },
+      notification2() {
+        Notification({
+          title: '通知',
+          message: '通知信息',
+          type: 'success'
+        });
+      },
+      notification3() {
+        Notification({
+          title: '通知',
+          message: '通知信息',
+          type: 'warning',
+          duration: 2
+        });
+      },
+      notification4() {
+        Notification({
+          title: '通知',
+          message: '通知信息',
+          type: 'error',
+          callback: function(instance) {
+            console.log(instance.id + ' is closed.');
+          }
+        });
+      }
+    }
+  };
+</script>

src/basic/dropdown.vue

@@ -60,8 +60,7 @@
 
     data() {
       return {
-        showItem: false,
-        pendingClose: 0
+        showItem: false
       }
     },
 

src/index.js

@@ -86,6 +86,6 @@ export var initComponents = (Vue, prefix, components) => {
 
 export { default as MessageBox } from './service/msgbox'
 
-export { default as Notification } from './service/notification.vue'
+export { default as Notification } from './service/notification'
 
 export { default as SchemaStore } from './schema/store'

src/service/notification.js

@@ -0,0 +1,55 @@
+var Vue = require('../config');
+var NotificationConstructor = Vue.extend(require('./notification.vue'));
+
+var instance;
+var instances = [];
+var seed = 1;
+
+var Notification = function(options) {
+
+  options = options || {};
+  var userOnClose = options.callback;
+  var id = 'notification_' + seed++;
+
+  options.callback = function() {
+    Notification.close(id, userOnClose);
+  };
+
+  instance = new NotificationConstructor({
+    data: options
+  });
+  instance.id = id;
+  instance.vm = instance.$mount();
+  instance.vm.$appendTo('body');
+  instance.dom = instance.vm.$el;
+
+  var topDist = 0;
+  for (var i = 0, len = instances.length; i < len; i++) {
+    topDist += instances[i].$el.offsetHeight + 10;
+  }
+  topDist += 10;
+  instance.top = topDist;
+  instances.push(instance);
+};
+
+Notification.close = function(id, userOnClose) {
+  for (var i = 0, len = instances.length; i < len; i++) {
+    if (id === instances[i].id) {
+      if (typeof userOnClose === 'function') {
+        userOnClose(instances[i]);
+      }
+      var index = i;
+      var removedHeight = instances[i].dom.offsetHeight;
+      instances.splice(i, 1);
+      break;
+    }
+  }
+
+  if (len > 1) {
+    for (i = index; i < len -1 ; i++) {
+      instances[i].dom.style.top = parseInt(instances[i].dom.style.top) - removedHeight - 10 + 'px';
+    }
+  }
+};
+
+export default Notification;

src/service/notification.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="notification" transition="fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
+    <div class="icon fa {{iconClass}}"></div>
+    <div class="group">
+      <span>{{title}}</span>
+      <p>{{message}}</p>
+      <div class="closeBtn fa fa-times" @click="handleClose()"></div>
+    </div>
+  </div>
+</template>
+
+<style>
+  .notification {
+    display: inline-block;
+    width: 320px;
+    padding: 15px;
+    box-sizing: border-box;
+    border: solid 1px #eee;
+    border-radius: 10px;
+    position: fixed;
+    right: 25px;
+    background-color: #f8f8f8;
+    transition: opacity 0.2s, top 0.2s;
+    overflow: hidden;
+  }
+
+  .notification .group {
+    float: left;
+    display: inline-block;
+    width: 230px;
+    color: #333;
+  }
+
+  .notification .icon {
+    display: inline-block;
+    box-sizing: border-box;
+    height: 48px;
+    line-height: 42px;
+    text-align: center;
+    width: 48px;
+    border: solid 3px;
+    border-radius: 50%;
+    font-size: 30px;
+    float: left;
+    margin-right: 10px;
+  }
+
+  .notification .success {
+    color: #87d068;
+    border-color: #87d068;
+  }
+
+  .notification .error {
+    color: #f60;
+    border-color: #f60;
+  }
+
+  .notification .info {
+    color: #2db7f5;
+    border-color: #2db7f5;
+  }
+
+  .notification .warning {
+    color: #fac450;
+    border-color: #fac450;
+  }
+
+  .notification span {
+    font-size: 16px;
+  }
+
+  .notification p {
+    font-size: 14px;
+    margin: 5px 0 0 0;
+  }
+
+  .notification .closeBtn {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    cursor: pointer;
+  }
+
+  .fade-leave {
+    opacity: 0;
+  }
+</style>
+
+<script type="text/ecmascript-6" lang="babel">
+
+  export default {
+    data() {
+      return {
+        title: '',
+        message: '',
+        duration: 5,
+        type: 'info',
+        callback: null,
+
+        closed: false,
+        top: null,
+        timer: null
+      }
+    },
+
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.$destroy(true);
+        }
+      }
+    },
+
+    computed: {
+      iconClass() {
+        switch(this.type) {
+          case 'success':
+            return 'fa-check success';
+            break;
+          case 'warning':
+            return 'fa-exclamation warning';
+            break;
+          case 'error':
+            return 'fa-times error';
+            break;
+          default:
+            return 'fa-info info';
+        }
+      }
+    },
+
+    methods: {
+      handleClose() {
+        this.closed = true;
+        if (this.callback) {
+          this.callback();
+        }
+      },
+
+      clearTimer() {
+        clearTimeout(this.timer);
+      },
+
+      startTimer() {
+        var self = this;
+        this.timer = setTimeout(function() {
+          if (!self.closed) {
+            self.handleClose();
+          }
+        }, this.duration * 1000);
+      }
+    },
+
+    ready() {
+      var self = this;
+      this.timer = setTimeout(function() {
+        if (!self.closed) {
+          self.handleClose();
+        }
+      }, this.duration * 1000);
+    }
+  }
+</script>