support Message

support Message

CHANGE.md

@@ -50,4 +50,9 @@ class 改为 className
 ### LoadingBar
 部分 prop 移至 data
 ### Modal
-visible 改为 value，使用 v-model，style 改为 styles，$Modal 的关闭有改动，建议后面在纯 html 模式下测试
+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

README.md

@@ -37,7 +37,7 @@
 - [x] Form
 - [x] Alert
 - [x] Card
-- [ ] Message
+- [x] Message
 - [ ] Notice
 - [x] Modal
 - [x] Progress

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>

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')
         }
     ]
 });

examples/routers/message.vue

@@ -1,44 +1,20 @@
 <template>
-    <i-button @click="confirm">标准</i-button>
+    <i-button @click.native="time">显示一个10秒的提示</i-button>
-    <i-button @click="custom">自定义按钮文字</i-button>
-    <i-button @click="async">异步关闭</i-button>
 </template>
 <script>
     export default {
         methods: {
-            confirm () {
+            time () {
-                this.$Modal.confirm({
+                this.$Message.info('我将在10秒后消失', 3, () => {
-                    title: '确认对话框标题',
+                    console.log(1111)
-                    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);
-                    }
                 });
             }
+        },
+        mounted () {
+            this.$Message.config({
+                top: 50,
+                duration: 3
+            });
         }
     }
 </script>

src/components/base/notification/index.js

@@ -24,8 +24,8 @@ Notification.newInstance = properties => {
         notice (noticeProps) {
             notification.add(noticeProps);
         },
-        remove (key) {
+        remove (name) {
-            notification.close(key);
+            notification.close(name);
         },
         component: notification,
         destroy () {

src/components/base/notification/notice.vue

@@ -1,10 +1,12 @@
 <template>
-    <div :class="classes" :style="style" :transition="transitionName">
+    <transition :name="transitionName">
-        <div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
+        <div :class="classes" :style="styles">
-        <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+            <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
-            <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+            <a :class="[baseClass + '-close']" @click="close" v-if="closable">
-        </a>
+                <i class="ivu-icon ivu-icon-ios-close-empty"></i>
-    </div>
+            </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 () {

src/components/base/notification/notification.vue

@@ -1,18 +1,21 @@
 <template>
-    <div :class="classes" :style="style">
+    <div :class="classes" :style="styles">
-        <Notice v-for="notice in notices"
+        <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;
                     }

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}`);

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';
 

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;
 };