src -> components -> Toast -> toast.vue
<template>
<transition name="fades">
<div class="Errormes" v-if="show">{{txt}}</div>
</transition>
</template>
<script>
export default {
name: 'Toast',
data () {
return {
txt: '',
show: false
}
}
}
</script>
<style lang="less" scoped>
.fades-enter-active, .fades-leave-active {
transition: opacity 0.5s;
}
.fades-enter, .fades-leave-active {
opacity: 0;
}
/* 提示弹框 */
.Errormes {
position: fixed;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 20px 30px;
background: rgba(0, 0, 0, 0.8);
border-radius: 16px;
color: #fff;
font-size: 28px;
z-index: 999999;
max-width: 80%;
height: auto;
line-height: 60px;
text-align: center;
}
</style>
src -> components -> Toast -> index.js
import Toast from './toast.vue'
const toast = {}
toast.install = (vue) => {
const ToastClass = vue.extend(Toast)
const instance = new ToastClass()
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
let t = null
const ToastMain = {
show (msg, seconds = 2000) {
if (t) clearTimeout(t)
instance.txt = msg
instance.show = true
t = setTimeout(() => {
instance.show = false
}, seconds)
}
}
vue.prototype.$toast = ToastMain
}
export default toast
main.js
import Vue from 'vue'
import App from './App.vue'
import toast from '@/components/Toast/index'
Vue.use(toast)
使用
$toast.show(message)