From 6cadeba44f0eccce5af738bf34626aa8c2a4152f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 9 Mar 2017 22:21:54 +0800
Subject: [PATCH] support Message

support Message
---
 CHANGE.md                                     |  7 ++-
 README.md                                     |  2 +-
 examples/app.vue                              |  1 +
 examples/main.js                              |  4 ++
 examples/routers/message.vue                  | 44 +++++--------------
 src/components/base/notification/index.js     |  4 +-
 src/components/base/notification/notice.vue   | 24 +++++-----
 .../base/notification/notification.vue        | 23 +++++-----
 src/components/message/index.js               | 10 ++---
 src/components/table/table-body.vue           |  1 +
 src/index.js                                  |  6 +--
 11 files changed, 59 insertions(+), 67 deletions(-)

diff --git a/CHANGE.md b/CHANGE.md
index d71c88cf..8e982948 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -50,4 +50,9 @@ class 改为 className
 ### LoadingBar
 部分 prop 移至 data
 ### Modal
-visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试
\ No newline at end of file
+visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试
+### Table
+i-table 改为 Table
+### Message
+notice.vue 的 key 改为了 name，style 改为 styles
+notification.vue 的 key 改为了 name，style 改为 styles
\ No newline at end of file
diff --git a/README.md b/README.md
index db181d47..f6e26f7f 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@
 - [x] Form
 - [x] Alert
 - [x] Card
-- [ ] Message
+- [x] Message
 - [ ] Notice
 - [x] Modal
 - [x] Progress
diff --git a/examples/app.vue b/examples/app.vue
index aee4fbe1..f823786c 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -52,6 +52,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/table">Table</router-link></li>
                 <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>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/examples/main.js b/examples/main.js
index 1971bf55..6e71b73b 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -172,6 +172,10 @@ const router = new VueRouter({
         {
             path: '/modal',
             component: require('./routers/modal.vue')
+        },
+        {
+            path: '/message',
+            component: require('./routers/message.vue')
         }
     ]
 });
diff --git a/examples/routers/message.vue b/examples/routers/message.vue
index 012292c9..1112b0f3 100644
--- a/examples/routers/message.vue
+++ b/examples/routers/message.vue
@@ -1,44 +1,20 @@
 <template>
-    <i-button @click="confirm">标准</i-button>
-    <i-button @click="custom">自定义按钮文字</i-button>
-    <i-button @click="async">异步关闭</i-button>
+    <i-button @click.native="time">显示一个10秒的提示</i-button>
 </template>
 <script>
     export default {
         methods: {
-            confirm () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    onOk: () => {
-                        this.$Message.info('点击了确定');
-                    },
-                    onCancel: () => {
-                        this.$Message.info('点击了取消');
-                    }
-                });
-            },
-            custom () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    okText: 'OK',
-                    cancelText: 'Cancel'
-                });
-            },
-            async () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>对话框将在 2秒 后关闭</p>',
-                    loading: true,
-                    onOk: () => {
-                        setTimeout(() => {
-                            this.$Modal.remove();
-                            this.$Message.info('异步关闭了对话框');
-                        }, 2000);
-                    }
+            time () {
+                this.$Message.info('我将在10秒后消失', 3, () => {
+                    console.log(1111)
                 });
             }
+        },
+        mounted () {
+            this.$Message.config({
+                top: 50,
+                duration: 3
+            });
         }
     }
 </script>
diff --git a/src/components/base/notification/index.js b/src/components/base/notification/index.js
index 2bd5c4b0..4193c0e1 100644
--- a/src/components/base/notification/index.js
+++ b/src/components/base/notification/index.js
@@ -24,8 +24,8 @@ Notification.newInstance = properties => {
         notice (noticeProps) {
             notification.add(noticeProps);
         },
-        remove (key) {
-            notification.close(key);
+        remove (name) {
+            notification.close(name);
         },
         component: notification,
         destroy () {
diff --git a/src/components/base/notification/notice.vue b/src/components/base/notification/notice.vue
index c360afc7..77396628 100644
--- a/src/components/base/notification/notice.vue
+++ b/src/components/base/notification/notice.vue
@@ -1,10 +1,12 @@
 <template>
-    <div :class="classes" :style="style" :transition="transitionName">
-        <div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
-        <a :class="[baseClass + '-close']" @click="close" v-if="closable">
-            <i class="ivu-icon ivu-icon-ios-close-empty"></i>
-        </a>
-    </div>
+    <transition :name="transitionName">
+        <div :class="classes" :style="styles">
+            <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
+            <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+                <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+            </a>
+        </div>
+    </transition>
 </template>
 <script>
     export default {
@@ -21,7 +23,7 @@
                 type: String,
                 default: ''
             },
-            style: {
+            styles: {
                 type: Object,
                 default: function() {
                     return {
@@ -36,7 +38,7 @@
             className: {
                 type: String
             },
-            key: {
+            name: {
                 type: String,
                 required: true
             },
@@ -80,10 +82,10 @@
             close () {
                 this.clearCloseTimer();
                 this.onClose();
-                this.$parent.close(this.key);
+                this.$parent.close(this.name);
             }
         },
-        compiled () {
+        created () {
             this.clearCloseTimer();
 
             if (this.duration !== 0) {
@@ -94,7 +96,7 @@
 
             // check if with desc in Notice component
             if (this.prefixCls === 'ivu-notice') {
-                this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
+                this.withDesc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
             }
         },
         beforeDestroy () {
diff --git a/src/components/base/notification/notification.vue b/src/components/base/notification/notification.vue
index bb3bcf68..f9b3ace6 100644
--- a/src/components/base/notification/notification.vue
+++ b/src/components/base/notification/notification.vue
@@ -1,18 +1,21 @@
 <template>
-    <div :class="classes" :style="style">
-        <Notice v-for="notice in notices"
+    <div :class="classes" :style="styles">
+        <Notice
+            v-for="notice in notices"
+            :key="notice"
             :prefix-cls="prefixCls"
-            :style="notice.style"
+            :styles="notice.styles"
             :content="notice.content"
             :duration="notice.duration"
             :closable="notice.closable"
-            :key="notice.key"
+            :name="notice.name"
             :transition-name="notice.transitionName"
             :on-close="notice.onClose">
         </Notice>
     </div>
 </template>
 <script>
+    // todo :key="notice"
     import Notice from './notice.vue';
 
     const prefixCls = 'ivu-notification';
@@ -30,7 +33,7 @@
                 type: String,
                 default: prefixCls
             },
-            style: {
+            styles: {
                 type: Object,
                 default: function () {
                     return {
@@ -63,25 +66,25 @@
         },
         methods: {
             add (notice) {
-                const key = notice.key || getUuid();
+                const name = notice.name || getUuid();
 
                 let _notice = Object.assign({
-                    style: {
+                    styles: {
                         right: '50%'
                     },
                     content: '',
                     duration: 1.5,
                     closable: false,
-                    key: key
+                    name: name
                 }, notice);
 
                 this.notices.push(_notice);
             },
-            close (key) {
+            close (name) {
                 const notices = this.notices;
 
                 for (let i = 0; i < notices.length; i++) {
-                    if (notices[i].key === key) {
+                    if (notices[i].name === name) {
                         this.notices.splice(i, 1);
                         break;
                     }
diff --git a/src/components/message/index.js b/src/components/message/index.js
index 1685be99..3b9847ed 100644
--- a/src/components/message/index.js
+++ b/src/components/message/index.js
@@ -7,7 +7,7 @@ const prefixKey = 'ivu_message_key_';
 let defaultDuration = 1.5;
 let top;
 let messageInstance;
-let key = 1;
+let name = 1;
 
 const iconTypes = {
     'info': 'information-circled',
@@ -20,7 +20,7 @@ const iconTypes = {
 function getMessageInstance () {
     messageInstance = messageInstance || Notification.newInstance({
         prefixCls: prefixCls,
-        style: {
+        styles: {
             top: `${top}px`
         }
     });
@@ -42,9 +42,9 @@ function notice (content, duration = defaultDuration, type, onClose) {
     let instance = getMessageInstance();
 
     instance.notice({
-        key: `${prefixKey}${key}`,
+        name: `${prefixKey}${name}`,
         duration: duration,
-        style: {},
+        styles: {},
         transitionName: 'move-up',
         content: `
             <div class="${prefixCls}-custom-content ${prefixCls}-${type}">
@@ -57,7 +57,7 @@ function notice (content, duration = defaultDuration, type, onClose) {
 
     // 用于手动消除
     return (function () {
-        let target = key++;
+        let target = name++;
 
         return function () {
             instance.remove(`${prefixKey}${target}`);
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index 19a9b584..73dd9d8b 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -29,6 +29,7 @@
     </table>
 </template>
 <script>
+    // todo :key="row"
     import Cell from './cell.vue';
     import Mixin from './mixin';
 
diff --git a/src/index.js b/src/index.js
index 6f7e9c98..cc29e810 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,7 +21,7 @@ import Input from './components/input';
 import InputNumber from './components/input-number';
 import LoadingBar from './components/loading-bar';
 import Menu from './components/menu';
-// import Message from './components/message';
+import Message from './components/message';
 import Modal from './components/modal';
 // import Notice from './components/notice';
 import Page from './components/page';
@@ -80,7 +80,7 @@ const iview = {
     MenuGroup: Menu.Group,
     MenuItem: Menu.Item,
     Submenu: Menu.Sub,
-    // Message,
+    Message,
     Modal,
     // Notice,
     iOption: Option,
@@ -122,7 +122,7 @@ const install = function (Vue, opts = {}) {
     });
 
     Vue.prototype.$Loading = LoadingBar;
-    // Vue.prototype.$Message = Message;
+    Vue.prototype.$Message = Message;
     Vue.prototype.$Modal = Modal;
     // Vue.prototype.$Notice = Notice;
 };