39 lines
903 B
Vue
39 lines
903 B
Vue
|
<template>
|
||
|
|
<notifications position="bottom left">
|
||
|
|
<template slot="body" slot-scope="props">
|
||
|
|
<div :class="['vue-notification-template', 'vue-notification', props.item.type]">
|
||
|
|
<div
|
||
|
|
v-if="props.item.title"
|
||
|
|
class="notification-title"
|
||
|
|
v-html="props.item.title"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="notification-content"
|
||
|
|
v-html="props.item.text"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="buttons is-right" v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
|
||
|
|
<button
|
||
|
|
class="button noshadow is-small"
|
||
|
|
@click="action.callback"
|
||
|
|
v-for="(action, i) in props.item.data.actions" :key="'action_'+i">
|
||
|
|
{{ action.title }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</notifications>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'notification'
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.buttons {
|
||
|
|
margin-top: .5em;
|
||
|
|
}
|
||
|
|
</style>
|