github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Notification: fix style when message prop is omitted

pull/9032/head
Leopoldthecoder 2017-12-25 16:08:55 +08:00 committed by 杨奕
parent 3e945aa2b1
commit bd616e37b6
4 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/notification/src/main.js
View File

@ -25,7 +25,7 @@ const Notification = function(options) {
if (isVNode(options.message)) { if (isVNode(options.message)) {
instance.$slots.default = [options.message]; instance.$slots.default = [options.message];
options.message = ''; options.message = 'REPLACED_BY_VNODE';
} }
instance.id = id; instance.id = id;
instance.vm = instance.$mount(); instance.vm = instance.$mount();

2
packages/notification/src/main.vue
View File

@ -16,7 +16,7 @@
</i> </i>
<div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }"> <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
<h2 class="el-notification__title" v-text="title"></h2> <h2 class="el-notification__title" v-text="title"></h2>
<div class="el-notification__content"> <div class="el-notification__content" v-show="message">
<slot> <slot>
<p v-if="!dangerouslyUseHTMLString">{{ message }}</p> <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
<p v-else v-html="message"></p> <p v-else v-html="message"></p>

2
packages/theme-chalk/src/common/var.scss
View File

@ -292,7 +292,7 @@ $--message-danger-color: $--color-danger !default;
-------------------------- */ -------------------------- */
$--notification-width: 330px !default; $--notification-width: 330px !default;
$--notification-padding: 14px 26px 14px 13px !default; $--notification-padding: 14px 26px 14px 13px !default;
$--notification-raduis: 8px !default; $--notification-radius: 8px !default;
$--notification-shadow: $--box-shadow-light !default; $--notification-shadow: $--box-shadow-light !default;
$--notification-border-color: $--border-color-lighter !default; $--notification-border-color: $--border-color-lighter !default;
$--notification-icon-size: 24px !default; $--notification-icon-size: 24px !default;

5
packages/theme-chalk/src/notification.scss
View File

@ -5,7 +5,7 @@
display: flex; display: flex;
width: $--notification-width; width: $--notification-width;
padding: $--notification-padding; padding: $--notification-padding;
border-radius: $--notification-raduis; border-radius: $--notification-radius;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $--notification-border-color; border: 1px solid $--notification-border-color;
position: fixed; position: fixed;
@ -49,12 +49,11 @@
height: $--notification-icon-size; height: $--notification-icon-size;
width: $--notification-icon-size; width: $--notification-icon-size;
font-size: $--notification-icon-size; font-size: $--notification-icon-size;
transform: translateY(4px);
} }
@include e(closeBtn) { @include e(closeBtn) {
position: absolute; position: absolute;
top: 15px; top: 18px;
right: 15px; right: 15px;
cursor: pointer; cursor: pointer;
color: $--notification-close-color; color: $--notification-close-color;