support Message

support Message

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 () {

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 () {

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

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