<style src="./style.css"></style>
<template>
<transition name="vue-toast-opacity">
<div
class='vue-toast_container'
@mouseover='_stopTimer'
@mouseleave='_startTimer'
:style='style'
:class='[theme]'
>
<div class='vue-toast_message'>
<span v-html='message'></span>
<span
class='vue-toast_close-btn'
v-if='options.closeBtn'
@click='remove'
/>
</span>
</div>
</div>
</transition>
</template>
<script>
const defaultOptions = {
theme: 'default', // info warning error success
timeLife: 5000,
closeBtn: false,
}
export default {
props: {
message: {
required: true
},
position: {
type: Number,
required: true
},
onDestroy: {
required: true,
type: Function
},
options: {
type: Object
}
},
data() {
return {
isShow: false
}
},
computed: {
theme() {
return '_' + this.options.theme
},
style() {
return `transform: translateY(${this.options.directionOfJumping}${this.position * 100}%)`
},
fullOptions() {
return Object.assign({}, defaultOptions, this.options)
}
},
mounted() {
setTimeout(() => {
this.isShow = true
}, 50)
if (!this.fullOptions.closeBtn) {
this._startLazyAutoDestroy()
}
},
methods: {
// Public
remove() {
this._clearTimer()
this.onDestroy()
},
// Private
_startLazyAutoDestroy() {
this._clearTimer()
this.timerDestroy = setTimeout(() => {
this.remove()
}, this.fullOptions.timeLife)
},
_clearTimer() {
if (this.timerDestroy) {
clearTimeout(this.timerDestroy)
}
},
_startTimer() {
if (!this.fullOptions.closeBtn) {
this._startLazyAutoDestroy()
}
},
_stopTimer() {
if (!this.options.closeBtn) {
this._clearTimer()
}
}
}
}
</script>
<style src='./style.css'></style>
<template>
<transition-group
tag='div'
name='vue-toast'
class='vue-toast-manager_container'
:class='classesOfPosition'
>
<vue-toast
v-for='(toast, index) in toasts'
:key='toast.uid'
:message='toast.message'
:options='toast.options'
:onDestroy='toast.onDestroy'
:position='index'
></vue-toast>
</transition-group>
</template>
<script>
import VueToast from '../toast/index.vue'
import {isNumber} from '../utils.js'
const defaultOptions = {
maxToasts: 6,
position: 'left bottom'
}
export default {
data() {
return {
uid: 1,
toasts: [],
options: defaultOptions
}
},
computed: {
classesOfPosition() {
return this._updateClassesOfPosition(this.options.position)
},
directionOfJumping() {
return this._updateDirectionOfJumping(this.options.position)
}
},
methods: {
// Public
showToast(message, options) {
this._addToast(message, options)
this._moveToast()
return this
},
setOptions(options) {
this.options = Object.assign(this.options, options || {})
return this
},
closeAll() {
this.toasts = []
},
// Private
_addToast(message, options = {}) {
if (!message) {
return
}
options.directionOfJumping = this.directionOfJumping
const that = this
const uid = this.uid++
const toast = {
uid,
message,
options,
onDestroy() {
const i = that.toasts.findIndex(item => item.uid === uid)
that.toasts.splice(i, 1)
}
}
this.toasts.unshift(toast)
},
_moveToast(toast) {
const maxToasts = this.options.maxToasts > 0
? this.options.maxToasts
: 9999
this.toasts = this.toasts.reduceRight((prev, toast, i) => {
if (i + 1 >= maxToasts) {
return prev
}
return [toast].concat(prev)
}, [])
},
_updateClassesOfPosition(position) {
return position.split(' ').reduce((prev, val) => {
prev[`__${val.toLowerCase()}`] = true
return prev
}, {})
},
_updateDirectionOfJumping(position) {
return position.match(/top/i) ? '+' : '-'
}
},
components: { VueToast }
}
</script>