support Notice

support Notice

README.md

@@ -38,7 +38,7 @@
 - [x] Alert
 - [x] Card
 - [x] Message
-- [ ] Notice
+- [x] Notice
 - [x] Modal
 - [x] Progress
 - [x] Badge

examples/app.vue

@@ -53,6 +53,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/loading-bar">LoadingBar</router-link></li>
                 <li><router-link to="/modal">Modal</router-link></li>
                 <li><router-link to="/message">Message</router-link></li>
+                <li><router-link to="/notice">Notice</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -176,6 +176,10 @@ const router = new VueRouter({
         {
             path: '/message',
             component: require('./routers/message.vue')
+        },
+        {
+            path: '/notice',
+            component: require('./routers/notice.vue')
         }
     ]
 });

examples/routers/notice.vue

@@ -1,19 +1,21 @@
 <template>
-    <i-button @click="pop">Pop</i-button>
+    <i-button type="primary" @click.native="time">打开提醒</i-button>
 </template>
 <script>
     export default {
         methods: {
-            pop () {
+            time () {
-                for (let i = 0; i < 6; i++) {
-                    setTimeout(() => {
                 this.$Notice.open({
-                            title: 'test',
+                    title: '这是通知标题',
-                            duration: 1.5 + i
+                    desc: '这条通知不会自动关闭，需要点击关闭按钮才可以关闭。'
                 });
-                    }, i * 500);
-                }
             }
+        },
+        mounted () {
+            this.$Notice.config({
+                top: 150,
+                duration: 3
+            });
         }
     }
 </script>

src/components/base/notification/notice.vue

@@ -85,7 +85,7 @@
                 this.$parent.close(this.name);
             }
         },
-        created () {
+        mounted () {
             this.clearCloseTimer();
 
             if (this.duration !== 0) {

src/components/notice/index.js

@@ -7,7 +7,7 @@ const prefixKey = 'ivu_notice_key_';
 let top = 24;
 let defaultDuration = 4.5;
 let noticeInstance;
-let key = 1;
+let name = 1;
 
 const iconTypes = {
     'info': 'information-circled',
@@ -19,7 +19,7 @@ const iconTypes = {
 function getNoticeInstance () {
     noticeInstance = noticeInstance || Notification.newInstance({
         prefixCls: prefixCls,
-        style: {
+        styles: {
             top: `${top}px`,
             right: 0
         }
@@ -31,12 +31,12 @@ function getNoticeInstance () {
 function notice (type, options) {
     const title = options.title || '';
     const desc = options.desc || '';
-    const noticeKey = options.key || `${prefixKey}${key}`;
+    const noticeKey = options.name || `${prefixKey}${name}`;
     const onClose = options.onClose || function () {};
     // todo const btn = options.btn || null;
     const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
 
-    key++;
+    name++;
 
     let instance = getNoticeInstance();
 
@@ -65,9 +65,9 @@ function notice (type, options) {
     }
 
     instance.notice({
-        key: noticeKey.toString(),
+        name: noticeKey.toString(),
         duration: duration,
-        style: {},
+        styles: {},
         transitionName: 'move-notice',
         content: content,
         onClose: onClose,
@@ -99,11 +99,11 @@ export default {
             defaultDuration = options.duration;
         }
     },
-    close (key) {
+    close (name) {
-        if (key) {
+        if (name) {
-            key = key.toString();
+            name = name.toString();
             if (noticeInstance) {
-                noticeInstance.remove(key);
+                noticeInstance.remove(name);
             }
         } else {
             return false;

src/index.js

@@ -23,7 +23,7 @@ import LoadingBar from './components/loading-bar';
 import Menu from './components/menu';
 import Message from './components/message';
 import Modal from './components/modal';
-// import Notice from './components/notice';
+import Notice from './components/notice';
 import Page from './components/page';
 import Poptip from './components/poptip';
 import Progress from './components/progress';
@@ -82,7 +82,7 @@ const iview = {
     Submenu: Menu.Sub,
     Message,
     Modal,
-    // Notice,
+    Notice,
     iOption: Option,
     OptionGroup,
     Page,
@@ -124,7 +124,7 @@ const install = function (Vue, opts = {}) {
     Vue.prototype.$Loading = LoadingBar;
     Vue.prototype.$Message = Message;
     Vue.prototype.$Modal = Modal;
-    // Vue.prototype.$Notice = Notice;
+    Vue.prototype.$Notice = Notice;
 };
 
 // auto install