diff --git a/README.md b/README.md index f6e26f7..0f0c693 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ - [x] Alert - [x] Card - [x] Message -- [ ] Notice +- [x] Notice - [x] Modal - [x] Progress - [x] Badge diff --git a/examples/app.vue b/examples/app.vue index f823786..8ac9364 100644 --- a/examples/app.vue +++ b/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> diff --git a/examples/main.js b/examples/main.js index 6e71b73..495da89 100644 --- a/examples/main.js +++ b/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') } ] }); diff --git a/examples/routers/notice.vue b/examples/routers/notice.vue index 21de42d..563b46e 100644 --- a/examples/routers/notice.vue +++ b/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 () { - for (let i = 0; i < 6; i++) { - setTimeout(() => { - this.$Notice.open({ - title: 'test', - duration: 1.5 + i - }); - }, i * 500); - } + time () { + this.$Notice.open({ + title: '这是通知标题', + desc: '这条通知不会自动关闭,需要点击关闭按钮才可以关闭。' + }); } + }, + mounted () { + this.$Notice.config({ + top: 150, + duration: 3 + }); } } </script> diff --git a/src/components/base/notification/notice.vue b/src/components/base/notification/notice.vue index 7739662..dfa0c65 100644 --- a/src/components/base/notification/notice.vue +++ b/src/components/base/notification/notice.vue @@ -85,7 +85,7 @@ this.$parent.close(this.name); } }, - created () { + mounted () { this.clearCloseTimer(); if (this.duration !== 0) { diff --git a/src/components/notice/index.js b/src/components/notice/index.js index d089bed..1392774 100644 --- a/src/components/notice/index.js +++ b/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) { - if (key) { - key = key.toString(); + close (name) { + if (name) { + name = name.toString(); if (noticeInstance) { - noticeInstance.remove(key); + noticeInstance.remove(name); } } else { return false; diff --git a/src/index.js b/src/index.js index cc29e81..7387609 100644 --- a/src/index.js +++ b/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 -- libgit2 0.21.4