chenhaodong / mew-iview

Commit 833501a4fabde6a1651560013b231f119527e819

Authored by 梁灏
1 parent 6cadeba4

support Notice 

support Notice
Showing 7 changed files with 32 additions and 25 deletions   Show diff stats
Inline Side-by-side
README.md
  Show/Hide comments   View file @833501a
... ... @@ -38,7 +38,7 @@
38 38 - [x] Alert
39 39 - [x] Card
40 40 - [x] Message
41   -- [ ] Notice
  41 +- [x] Notice
42 42 - [x] Modal
43 43 - [x] Progress
44 44 - [x] Badge
... ...
examples/app.vue
  Show/Hide comments   View file @833501a
... ... @@ -53,6 +53,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
53 53 <li><router-link to="/loading-bar">LoadingBar</router-link></li>
54 54 <li><router-link to="/modal">Modal</router-link></li>
55 55 <li><router-link to="/message">Message</router-link></li>
  56 + <li><router-link to="/notice">Notice</router-link></li>
56 57 </ul>
57 58 </nav>
58 59 <router-view></router-view>
... ...
examples/main.js
  Show/Hide comments   View file @833501a
... ... @@ -176,6 +176,10 @@ const router = new VueRouter({
176 176 {
177 177 path: '/message',
178 178 component: require('./routers/message.vue')
  179 + },
  180 + {
  181 + path: '/notice',
  182 + component: require('./routers/notice.vue')
179 183 }
180 184 ]
181 185 });
... ...
examples/routers/notice.vue
  Show/Hide comments   View file @833501a
1 1 <template>
2   - <i-button @click="pop">Pop</i-button>
  2 + <i-button type="primary" @click.native="time">打开提醒</i-button>
3 3 </template>
4 4 <script>
5 5 export default {
6 6 methods: {
7   - pop () {
8   - for (let i = 0; i < 6; i++) {
9   - setTimeout(() => {
10   - this.$Notice.open({
11   - title: 'test',
12   - duration: 1.5 + i
13   - });
14   - }, i * 500);
15   - }
  7 + time () {
  8 + this.$Notice.open({
  9 + title: '这是通知标题',
  10 + desc: '这条通知不会自动关闭，需要点击关闭按钮才可以关闭。'
  11 + });
16 12 }
  13 + },
  14 + mounted () {
  15 + this.$Notice.config({
  16 + top: 150,
  17 + duration: 3
  18 + });
17 19 }
18 20 }
19 21 </script>
... ...
src/components/base/notification/notice.vue
  Show/Hide comments   View file @833501a
... ... @@ -85,7 +85,7 @@
85 85 this.$parent.close(this.name);
86 86 }
87 87 },
88   - created () {
  88 + mounted () {
89 89 this.clearCloseTimer();
90 90  
91 91 if (this.duration !== 0) {
... ...
src/components/notice/index.js
  Show/Hide comments   View file @833501a
... ... @@ -7,7 +7,7 @@ const prefixKey = &#39;ivu_notice_key_&#39;;
7 7 let top = 24;
8 8 let defaultDuration = 4.5;
9 9 let noticeInstance;
10   -let key = 1;
  10 +let name = 1;
11 11  
12 12 const iconTypes = {
13 13 'info': 'information-circled',
... ... @@ -19,7 +19,7 @@ const iconTypes = {
19 19 function getNoticeInstance () {
20 20 noticeInstance = noticeInstance || Notification.newInstance({
21 21 prefixCls: prefixCls,
22   - style: {
  22 + styles: {
23 23 top: `${top}px`,
24 24 right: 0
25 25 }
... ... @@ -31,12 +31,12 @@ function getNoticeInstance () {
31 31 function notice (type, options) {
32 32 const title = options.title || '';
33 33 const desc = options.desc || '';
34   - const noticeKey = options.key || `${prefixKey}${key}`;
  34 + const noticeKey = options.name || `${prefixKey}${name}`;
35 35 const onClose = options.onClose || function () {};
36 36 // todo const btn = options.btn || null;
37 37 const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
38 38  
39   - key++;
  39 + name++;
40 40  
41 41 let instance = getNoticeInstance();
42 42  
... ... @@ -65,9 +65,9 @@ function notice (type, options) {
65 65 }
66 66  
67 67 instance.notice({
68   - key: noticeKey.toString(),
  68 + name: noticeKey.toString(),
69 69 duration: duration,
70   - style: {},
  70 + styles: {},
71 71 transitionName: 'move-notice',
72 72 content: content,
73 73 onClose: onClose,
... ... @@ -99,11 +99,11 @@ export default {
99 99 defaultDuration = options.duration;
100 100 }
101 101 },
102   - close (key) {
103   - if (key) {
104   - key = key.toString();
  102 + close (name) {
  103 + if (name) {
  104 + name = name.toString();
105 105 if (noticeInstance) {
106   - noticeInstance.remove(key);
  106 + noticeInstance.remove(name);
107 107 }
108 108 } else {
109 109 return false;
... ...
src/index.js
  Show/Hide comments   View file @833501a
... ... @@ -23,7 +23,7 @@ import LoadingBar from &#39;./components/loading-bar&#39;;
23 23 import Menu from './components/menu';
24 24 import Message from './components/message';
25 25 import Modal from './components/modal';
26   -// import Notice from './components/notice';
  26 +import Notice from './components/notice';
27 27 import Page from './components/page';
28 28 import Poptip from './components/poptip';
29 29 import Progress from './components/progress';
... ... @@ -82,7 +82,7 @@ const iview = {
82 82 Submenu: Menu.Sub,
83 83 Message,
84 84 Modal,
85   - // Notice,
  85 + Notice,
86 86 iOption: Option,
87 87 OptionGroup,
88 88 Page,
... ... @@ -124,7 +124,7 @@ const install = function (Vue, opts = {}) {
124 124 Vue.prototype.$Loading = LoadingBar;
125 125 Vue.prototype.$Message = Message;
126 126 Vue.prototype.$Modal = Modal;
127   - // Vue.prototype.$Notice = Notice;
  127 + Vue.prototype.$Notice = Notice;
128 128 };
129 129  
130 130 // auto install
... ...