make Message and Notice support render

zhigang.li
1 parent 8a0cb3ce
Showing 8 changed files with 99 additions and 16 deletions Show diff stats
examples/routers/message.vue
examples/routers/notice.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/notice/index.js
src/styles/components/notice.less
@@ -13,12 +13,19 @@
             info () {
 //                this.$Message.info('这是一条普通提示');
                 this.$Message.success({
-                    content: '这是一条普通提示2',
+                    // content: '这是一条普通提示2',
                     duration: 500,
                     onClose () {
 //                        console.log(123)
                     },
-                    closable: true
+                    closable: true,
+                    render (h) {
+                        return h('Button',{
+                            props: {
+                                type: 'primary'
+                            }
+                        }, '这是render出来的');
+                    }
                 })
             },
             success () {
 <template>
     <div>
         <p>带描述信息</p>
+        <Button @click="normal(false)">普通</Button>
         <Button @click="info(false)">消息</Button>
         <Button @click="success(false)">成功</Button>
         <Button @click="warning(false)">警告</Button>
@@ -16,15 +17,30 @@
 <script>
     export default {
         methods: {
+            normal (nodesc) {
+                this.$Notice.open({
+                    title: 'google',
+                    duration: 0,
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
+                    render (h) {
+                        return h('span', {}, 'sdsdfsdf');
+                    }
+                });
+            },
             info (nodesc) {
                 this.$Notice.info({
-                    title: '这是通知标题',
-                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                    // title: '这是通知标题',
+                    duration: 0,
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
+                    render (h) {
+                        return h('span', {}, 'sdsdfsdf');
+                    }
                 });
             },
             success (nodesc) {
                 this.$Notice.success({
                     title: '这是通知标题',
+                    duration: 0,
                     desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
                 });
             },
@@ -5,7 +5,6 @@ Notification.newInstance = properties =&gt; {
     const _props = properties || {};
     const Instance = new Vue({
-        data: _props,
         render (h) {
             return h(Notification, {
                 props: _props
@@ -2,7 +2,12 @@
     <transition :name="transitionName" @enter="handleEnter" @leave="handleLeave">
         <div :class="classes" :style="styles">
             <template v-if="type === 'notice'">
-                <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
+                <div :class="contentClasses" ref="content" v-html="content"></div>
+                <div :class="contentWithIcon" ref="content">
+                    <render-cell
+                        :render="renderFunc"
+                    ></render-cell>
+                </div>
                 <a :class="[baseClass + '-close']" @click="close" v-if="closable">
                     <i class="ivu-icon ivu-icon-ios-close-empty"></i>
                 </a>
@@ -10,6 +15,11 @@
             <template v-if="type === 'message'">
                 <div :class="[baseClass + '-content']" ref="content">
                     <div :class="[baseClass + '-content-text']" v-html="content"></div>
+                    <div :class="[baseClass + '-content-text']">
+                        <render-cell
+                            :render="renderFunc"
+                        ></render-cell>
+                    </div>
                     <a :class="[baseClass + '-close']" @click="close" v-if="closable">
                         <i class="ivu-icon ivu-icon-ios-close-empty"></i>
                     </a>
@@ -19,7 +29,11 @@
     </transition>
 </template>
 <script>
+    import RenderCell from '../render';
     export default {
+        components: {
+            RenderCell
+        },
         props: {
             prefixCls: {
                 type: String,
@@ -36,6 +50,10 @@
                 type: String,
                 default: ''
             },
+            withIcon: Boolean,
+            render: {
+                type: Function
+            },
             styles: {
                 type: Object,
                 default: function() {
@@ -71,6 +89,9 @@
             baseClass () {
                 return `${this.prefixCls}-notice`;
             },
+            renderFunc () {
+                return this.render || function () {};
+            },
             classes () {
                 return [
                     this.baseClass,
@@ -82,7 +103,22 @@
                 ];
             },
             contentClasses () {
-                return `${this.baseClass}-content`;
+                return [
+                    `${this.baseClass}-content`,
+                    this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
+                ];
+            },
+            contentWithIcon () {
+                return [
+                    this.withIcon ? `${this.prefixCls}-content-with-icon` : '',
+                    this.render && !this.title && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : ''
+                ];
+            },
+            messageClasses () {
+                return [
+                    `${this.baseClass}-content`,
+                    this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
+                ];
             }
         },
         methods: {
@@ -124,7 +160,8 @@
             // check if with desc in Notice component
             if (this.prefixCls === 'ivu-notice') {
-                this.withDesc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
+                let desc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0];
+                this.withDesc = this.render ? true : (desc ? desc.innerHTML !== '' : false);
             }
         },
         beforeDestroy () {
@@ -8,6 +8,8 @@
             :type="notice.type"
             :content="notice.content"
             :duration="notice.duration"
+            :render="notice.render"
+            :withIcon="notice.withIcon"
             :closable="notice.closable"
             :name="notice.name"
             :transition-name="notice.transitionName"
@@ -31,7 +31,7 @@ function getMessageInstance () {
     return messageInstance;
 }
-function notice (content = '', duration = defaults.duration, type, onClose = function () {}, closable = false) {
+function notice (content = '', duration = defaults.duration, type, onClose = function () {}, closable = false, render = function () {}) {
     const iconType = iconTypes[type];
     // if loading
@@ -50,6 +50,7 @@ function notice (content = &#39;&#39;, duration = defaults.duration, type, onClose = fun
                 <span>${content}</span>
             </div>
         `,
+        render: render,
         onClose: onClose,
         closable: closable,
         type: 'message'
@@ -89,7 +90,7 @@ export default {
                 content: options
             };
         }
-        return notice(options.content, options.duration, type, options.onClose, options.closable);
+        return notice(options.content, options.duration, type, options.onClose, options.closable, options.render);
     },
     config (options) {
         if (options.top || options.top === 0) {
@@ -33,6 +33,7 @@ function notice (type, options) {
     const desc = options.desc || '';
     const noticeKey = options.name || `${prefixKey}${name}`;
     const onClose = options.onClose || function () {};
+    const render = options.render;
     // todo const btn = options.btn || null;
     const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
@@ -42,9 +43,12 @@ function notice (type, options) {
     let content;
-    const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
+    let withIcon;
+
+    const with_desc = (options.render && !title) ? '' : desc === '' ? '' : ` ${prefixCls}-with-desc`;
     if (type == 'normal') {
+        withIcon = false;
         content = `
             <div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
                 <div class="${prefixCls}-title">${title}</div>
@@ -53,6 +57,7 @@ function notice (type, options) {
         `;
     } else {
         const iconType = iconTypes[type];
+        withIcon = true;
         content = `
             <div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
                 <span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
@@ -63,13 +68,14 @@ function notice (type, options) {
             </div>
         `;
     }
-
     instance.notice({
         name: noticeKey.toString(),
         duration: duration,
         styles: {},
         transitionName: 'move-notice',
         content: content,
+        withIcon: withIcon,
+        render: render,
         onClose: onClose,
         closable: true,
         type: 'notice'
@@ -11,10 +11,17 @@
     position: fixed;
     z-index: @zindex-notification;
+    &-content-with-icon{
+        margin-left: 51px;
+    }
+    &-with-desc&-with-icon &-title{
+        margin-left: 51px;
+    }
+
     &-notice {
         margin-bottom: @notice-margin-bottom;
         padding: @notice-padding;
-        //border: 1px solid @border-color-split;
+        border: 1px solid @border-color-split;
         border-radius: @border-radius-small;
         box-shadow: @shadow-base;
         background: #fff;
@@ -34,6 +41,12 @@
             }
         }
+        &-content-with-render{
+            .ivu-notice-desc{
+                display: none;
+            }
+        }
+
         &-with-desc{
             .@{notice-prefix-cls}-notice-close{
                 top: 11px;
@@ -41,8 +54,13 @@
         }
     }
+    &-content-with-render-notitle{
+        margin-left: 26px;
+    }
+
     &-title {
         font-size: @font-size-base;
+        line-height: @font-size-base + 3;  //fixed the bug that the bottom of some letters were hidden just like 'g'
         color: @title-color;
         padding-right: 10px;
         overflow: hidden;
@@ -53,9 +71,6 @@
         font-weight: bold;
         margin-bottom: 8px;
     }
-    &-with-desc&-with-icon &-title{
-        margin-left: 51px;
-    }
     &-desc {
         font-size: 12px;