fix(alert): don't show content when there is no content

This commit is contained in:
07akioni 2019-10-30 16:35:34 +08:00
parent 52a58fa727
commit 27826b31a9
2 changed files with 17 additions and 14 deletions

View File

@ -43,7 +43,10 @@
> >
{{ title }} {{ title }}
</div> </div>
<div class="n-alert-body__content"> <div
v-if="$slots.default"
class="n-alert-body__content"
>
<slot /> <slot />
</div> </div>
</div> </div>

View File

@ -1,6 +1,6 @@
import Message from './Message' import Message from './Message'
function setTheme(messageContainer) { function setTheme (messageContainer) {
const themeClasses = Array.from(messageContainer.classList).filter(c => const themeClasses = Array.from(messageContainer.classList).filter(c =>
c.endsWith('-theme') c.endsWith('-theme')
) )
@ -8,7 +8,7 @@ function setTheme(messageContainer) {
if (this.theme) messageContainer.classList.add(`n-${this.theme}-theme`) if (this.theme) messageContainer.classList.add(`n-${this.theme}-theme`)
} }
function attachMessageContainer() { function attachMessageContainer () {
let messageContainer = document.querySelector('.n-message-container') let messageContainer = document.querySelector('.n-message-container')
if (!messageContainer) { if (!messageContainer) {
messageContainer = document.createElement('div') messageContainer = document.createElement('div')
@ -20,14 +20,14 @@ function attachMessageContainer() {
return messageContainer return messageContainer
} }
function registerMessageEl(container, el, option) { function registerMessageEl (container, el, option) {
el.classList.add('n-message--enter') el.classList.add('n-message--enter')
container.appendChild(el) container.appendChild(el)
el.getBoundingClientRect() el.getBoundingClientRect()
el.classList.remove('n-message--enter') el.classList.remove('n-message--enter')
setTimeout(function() { setTimeout(function () {
setTimeout(function() { setTimeout(function () {
setTimeout(function() { setTimeout(function () {
container.removeChild(el) container.removeChild(el)
}, option.vanishTransitionTimeout) }, option.vanishTransitionTimeout)
el.classList.add('n-message--leave') el.classList.add('n-message--leave')
@ -44,7 +44,7 @@ function registerMessageEl(container, el, option) {
* @param {string} option.icon * @param {string} option.icon
* @param {string} option.iconColor * @param {string} option.iconColor
*/ */
function mixinOption(option) { function mixinOption (option) {
const defaultOptions = { const defaultOptions = {
duration: 3000, duration: 3000,
emergeTransitionTimeout: 300, emergeTransitionTimeout: 300,
@ -68,8 +68,8 @@ const NMessage = {
top: 20 top: 20
}, },
attachMessageContainer, attachMessageContainer,
notice(content, option) { notice (content, option) {
console.log('test', this) // console.log('test', this)
const messageContainer = this.attachMessageContainer() const messageContainer = this.attachMessageContainer()
const messageCell = new this.Vue({ const messageCell = new this.Vue({
...Message, ...Message,
@ -77,22 +77,22 @@ const NMessage = {
}).$mount() }).$mount()
registerMessageEl(messageContainer, messageCell.$el, mixinOption(option)) registerMessageEl(messageContainer, messageCell.$el, mixinOption(option))
}, },
info(content, option) { info (content, option) {
option = mixinOption(option) option = mixinOption(option)
option.type = 'info' option.type = 'info'
this.notice(content, option) this.notice(content, option)
}, },
success(content, option) { success (content, option) {
option = mixinOption(option) option = mixinOption(option)
option.type = 'success' option.type = 'success'
this.notice(content, option) this.notice(content, option)
}, },
warning(content, option) { warning (content, option) {
option = mixinOption(option) option = mixinOption(option)
option.type = 'warning' option.type = 'warning'
this.notice(content, option) this.notice(content, option)
}, },
error(content, option) { error (content, option) {
option = mixinOption(option) option = mixinOption(option)
option.type = 'error' option.type = 'error'
this.notice(content, option) this.notice(content, option)