update Notice style

This commit is contained in:
梁灏 2018-06-25 21:06:39 +08:00
parent 0069c7b150
commit 36e46e5a77
2 changed files with 12 additions and 36 deletions

View file

@ -2,7 +2,9 @@
<div> <div>
<p>带描述信息</p> <p>带描述信息</p>
<Button @click="normal(false)">普通</Button> <Button @click="normal(false)">普通</Button>
<Button @click="normal(true)">普通</Button>
<Button @click="info(false)">消息</Button> <Button @click="info(false)">消息</Button>
<Button @click="info(true)">消息</Button>
<Button @click="success(false)">成功</Button> <Button @click="success(false)">成功</Button>
<Button @click="warning(false)">警告</Button> <Button @click="warning(false)">警告</Button>
<Button @click="error(false)">错误</Button> <Button @click="error(false)">错误</Button>
@ -23,19 +25,19 @@
title: 'google', title: 'google',
duration: 0, duration: 0,
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述', desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
render (h) { // render (h) {
return h('span', {}, 'sdsdfsdf'); // return h('span', {}, 'sdsdfsdf');
} // }
}); });
}, },
info (nodesc) { info (nodesc) {
this.$Notice.info({ this.$Notice.info({
// title: '', title: '这是通知标题',
duration: 0, duration: 0,
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述', desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
render (h) { // render (h) {
return h('span', {}, 'sdsdfsdf'); // return h('span', {}, 'sdsdfsdf');
} // }
}); });
}, },
success () { success () {

View file

@ -31,7 +31,7 @@
&-close { &-close {
position: absolute; position: absolute;
right: 16px; right: 8px;
top: 15px; top: 15px;
color: #999; color: #999;
outline: none; outline: none;
@ -89,9 +89,8 @@
&-icon { &-icon {
position: absolute; position: absolute;
left: 20px; left: 16px;
margin-top: -1px; font-size: @font-size-large;
font-size: 16px;
&-success { &-success {
color: @success-color; color: @success-color;
@ -121,29 +120,4 @@
left: 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;
}
}
} }