/
Message.vue
47 lines (45 loc) · 1.33 KB
/
Message.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
<transition name="fade">
<article
v-if="isActive"
class="message"
:class="[type, size]">
<header v-if="title" class="message-header">
<p>{{ title }}</p>
<button
v-if="closable"
type="button"
class="delete"
@click="close"
/>
</header>
<section class="message-body">
<div class="media">
<div v-if="icon && hasIcon" class="media-left">
<b-icon
:icon="icon"
:pack="iconPack"
:class="type"
both
:size="newIconSize"/>
</div>
<div class="media-content">
<slot/>
</div>
</div>
</section>
</article>
</transition>
</template>
<script>
import MessageMixin from '../../utils/MessageMixin.js'
export default {
name: 'BMessage',
mixins: [MessageMixin],
data() {
return {
newIconSize: this.iconSize || this.size || 'is-large'
}
}
}
</script>