optimize Notice style when without desc

optimize Notice style when without desc

src/components/base/notification/notice.vue

@@ -47,6 +47,11 @@
                 type: String
             }
         },
+        data () {
+            return {
+                withDesc: false
+            }
+        },
         computed: {
             baseClass () {
                 return `${this.prefixCls}-notice`;
@@ -56,7 +61,8 @@
                     this.baseClass,
                     {
                         [`${this.className}`]: !!this.className,
-                        [`${this.baseClass}-closable`]: this.closable
+                        [`${this.baseClass}-closable`]: this.closable,
+                        [`${this.baseClass}-with-desc`]: this.withDesc
                     }
                 ]
             },
@@ -85,6 +91,11 @@
                     this.close();
                 }, this.duration * 1000)
             }
+
+            // check if with desc in Notice component
+            if (this.prefixCls === 'ivu-notice') {
+                this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
+            }
         },
         beforeDestroy () {
             this.clearCloseTimer();

src/components/notice/index.js

@@ -42,9 +42,11 @@ function notice (type, options) {
 
     let content;
 
+    const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
+
     if (type == 'normal') {
         content = `
-            <div class="${prefixCls}-custom-content">
+            <div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
                 <div class="${prefixCls}-title">${title}</div>
                 <div class="${prefixCls}-desc">${desc}</div>
             </div>
@@ -52,7 +54,7 @@ function notice (type, options) {
     } else {
         const iconType = iconTypes[type];
         content = `
-            <div class="${prefixCls}-custom-content ${prefixCls}-with-icon">
+            <div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
                 <span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
                     <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
                 </span>

src/styles/components/notice.less

@@ -6,26 +6,26 @@
 @notice-margin-bottom: 10px;
 
 .@{notice-prefix-cls} {
-    position: fixed;
-    z-index: @zindex-notification;
     width: @notice-width;
     margin-right: 24px;
+    position: fixed;
+    z-index: @zindex-notification;
 
     &-notice {
-        padding: @notice-padding;
-        border-radius: @border-radius-base;
-        box-shadow: @shadow-base;
-        border: 1px solid @border-color-base;
-        background: #fff;
-        line-height: 1.5;
-        position: relative;
         margin-bottom: @notice-margin-bottom;
+        padding: @notice-padding;
+        border: 1px solid @border-color-split;
+        border-radius: @border-radius-small;
+        box-shadow: @shadow-base;
+        background: #fff;
+        line-height: 1;
+        position: relative;
         overflow: hidden;
 
         &-close {
             position: absolute;
             right: 16px;
-            top: 10px;
+            top: 15px;
             color: #999;
             outline: none;
 
@@ -33,35 +33,48 @@
                 .close-base(-3px);
             }
         }
+
+        &-with-desc{
+            .@{notice-prefix-cls}-notice-close{
+                top: 11px;
+            }
+        }
     }
 
     &-title {
         font-size: @font-size-base;
-        color: @text-color;
+        color: @title-color;
-        margin-bottom: 4px;
+        padding-right: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    &-with-desc &-title{
+        margin-bottom: 8px;
+    }
+    &-with-desc&-with-icon &-title{
+        margin-left: 51px;
     }
 
     &-desc {
         font-size: 12px;
         color: @legend-color;
         text-align: justify;
+        line-height: 1.5;
+    }
+    &-with-desc&-with-icon &-desc{
+        margin-left: 51px;
     }
 
     &-with-icon &-title{
-        margin-left: 51px;
+        margin-left: 26px;
-        margin-bottom: 4px;
-    }
-
-    &-with-icon  &-desc {
-        margin-left: 51px;
     }
 
     &-icon {
         position: absolute;
-        left: 21px;
+        left: 20px;
-        top: 50%;
+        margin-top: -1px;
-        margin-top: -21px;
+        font-size: 16px;
-        font-size: 28px;
 
         &-success {
             color: @success-color;
@@ -76,4 +89,44 @@
             color: @error-color;
         }
     }
+    &-with-desc &-icon{
+        font-size: 36px;
+    }
+
+    &-custom-content{
+        &:after{
+            content: "";
+            display: block;
+            width: 4px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+        }
+    }
+    &-with-normal{
+        &:after{
+            background: @primary-color;
+        }
+    }
+    &-with-info{
+        &:after{
+            background: @primary-color;
+        }
+    }
+    &-with-success{
+        &:after{
+            background: @success-color;
+        }
+    }
+    &-with-warning{
+        &:after{
+            background: @warning-color;
+        }
+    }
+    &-with-error{
+        &:after{
+            background: @error-color;
+        }
+    }
 }

test/routers/message.vue

@@ -1,29 +1,23 @@
 <template>
-    <Button @click="info">info</Button>
+    <i-button @click="mInfo">m信息</i-button>
-    <Button @click="success">success</Button>
+    <i-button @click="open">打开</i-button>
-    <Button @click="error">error</Button>
+    <i-button @click="info2">消息2</i-button>
-    <Button @click="warning">warning</Button>
+    <i-button @click="info">消息</i-button>
-    <Button @click="loading">手动消失</Button>
+    <i-button @click="success">成功</i-button>
-    <Button @click="destroy">destroy</Button>
+    <i-button @click="warning">警告</i-button>
-    <Alert closable>消息提示文案</Alert>
+    <i-button @click="error">错误</i-button>
-    <Alert type="success" show-icon closable>
-        成功提示文案
-        <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
-    </Alert>
-    <Card :bordered="false">
-        <p slot="title">无边框标题</p>
-        <p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
-    </Card>
 </template>
 <script>
-    import { Message, Button, Alert, Card } from 'iview';
+    import { Message, Button, Alert, Card, Notice, iButton } from 'iview';
 
     export default {
         components: {
             Message,
             Button,
             Alert,
-            Card
+            Card,
+            Notice,
+            iButton
         },
         props: {
         
@@ -37,32 +31,82 @@
 
         },
         methods: {
+            open () {
+                Notice.open({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                })
+            },
             info () {
-                Message.info('欢迎来到iView', 1000, () => {
+                Notice.info({
-                    console.log('close info');
+                    duration: 1000,
+                    title: '这是通知标题',
+//                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                });
+            },
+            info2 () {
+                Notice.open({
+                    duration: 1000,
+                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
+                });
+                Notice.info({
+                    duration: 1000,
+                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
+                });
+                Notice.open({
+                    duration: 1000,
+                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+                Notice.info({
+                    duration: 1000,
+                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+                Notice.success({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+                Notice.warning({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+                Notice.error({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
                 });
             },
             success () {
-                Message.success('成功啦', 5, () => {
+                Notice.success({
-                    console.log('close successs');
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+            },
+            warning () {
+                Notice.warning({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
                 });
             },
             error () {
-                Message.error('错误啦');
+                Notice.error({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
             },
-            warning () {
+            mInfo () {
-                Message.warning('来个警告');
+                Message.info('飞机飞士大夫', 1000);
-            },
-            loading () {
-                const hide = Message.loading('我是loading', 0);
-
-                setTimeout(hide, 5000);
-            },
-            destroy () {
-                Message.destroy();
             }
         },
         ready () {
+            this.info2();
 //            Message.config({
 //                top: 50,
 //                duration: 8