Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-14 23:47:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added option to show image in toast

Browse source
This commit is contained in:
Roman Cervantes 2019-04-05 23:15:17 -07:00
parent 2a901de4a7
commit eb2fcaa07b
1 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/Toast/Toast.vue
View file

@ -1,8 +1,9 @@
<template lang="html">
<div
:class="['toast', { show }]"
:class="['toast', { show, 'has-image': imageUrl }]"
@click="close"
>
<img :src="imageUrl" />
<i :class="[iconName, type]" />
<h4>{{ message }}</h4>
</div>
@ -13,6 +14,7 @@ export default {
data() {
return {
message: '',
imageUrl: null,
type: 'success',
timer: 2000,
show: false,
@ -50,12 +52,13 @@ export default {
},
methods: {
toast({ message, type }) {
toast({ message, type, imageUrl }) {
this.timer = type === 'error' || type === 'warning'
? 5000
: 2000;
this.message = message || null;
this.imageUrl = imageUrl || null;
this.type = Object.keys(this.toastTypes).includes(type)
? type
@ -89,6 +92,21 @@ export default {
padding: $gp;
transition: all 200ms linear;
&.has-image {
padding: $gp / 3;
max-width: 240px;
h4 {
font-size: 12px;
}
img {
margin-right: $gp / 2;
max-width: 50px;
max-height: 50px;
}
}
i {
margin-right: $gp / 2;
font-size: 20px;