support Message

support Message

support Message
梁灏
1 parent a538b675
Showing 11 changed files with 59 additions and 67 deletions Show diff stats
CHANGE.md
README.md
examples/app.vue
examples/main.js
examples/routers/message.vue
src/components/base/notification/index.js
src/components/base/notification/notice.vue
src/components/base/notification/notification.vue
src/components/message/index.js
src/components/table/table-body.vue
src/index.js
@@ -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
@@ -37,7 +37,7 @@
 - [x] Form
 - [x] Alert
 - [x] Card
-- [ ] Message
+- [x] Message
 - [ ] Notice
 - [x] Modal
 - [x] Progress
@@ -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>
@@ -172,6 +172,10 @@ const router = new VueRouter({
         {
             path: '/modal',
             component: require('./routers/modal.vue')
+        },
+        {
+            path: '/message',
+            component: require('./routers/message.vue')
         }
     ]
 });
 <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>
@@ -24,8 +24,8 @@ Notification.newInstance = properties =&gt; {
         notice (noticeProps) {
             notification.add(noticeProps);
         },
-        remove (key) {
-            notification.close(key);
+        remove (name) {
+            notification.close(name);
         },
         component: notification,
         destroy () {
 <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 () {
 <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;
                     }
@@ -7,7 +7,7 @@ const prefixKey = &#39;ivu_message_key_&#39;;
 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}`);
@@ -29,6 +29,7 @@
     </table>
 </template>
 <script>
+    // todo :key="row"
     import Cell from './cell.vue';
     import Mixin from './mixin';
@@ -21,7 +21,7 @@ import Input from &#39;./components/input&#39;;
 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;
 };