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)) {
instance.$slots.default = [options.message];
options.message = '';
options.message = 'REPLACED_BY_VNODE';
}
instance.id = id;
instance.vm = instance.$mount();

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

@ -16,7 +16,7 @@
</i>
<div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
<h2 class="el-notification__title" v-text="title"></h2>
<div class="el-notification__content">
<div class="el-notification__content" v-show="message">
<slot>
<p v-if="!dangerouslyUseHTMLString">{{ 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-padding: 14px 26px 14px 13px !default;
$--notification-raduis: 8px !default;
$--notification-radius: 8px !default;
$--notification-shadow: $--box-shadow-light !default;
$--notification-border-color: $--border-color-lighter !default;
$--notification-icon-size: 24px !default;

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

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