toast.vue
<template>
<transition name="message">
<div class="toastWrap" v-if="toastShow" v-html="toastVal"></div>
</transition>
</template>
<script>
export default {
name: 'Toast'
}
</script>
<style lang="less" scoped>
.toastWrap{
padding:.2rem;
position: fixed;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
margin:0 auto;
z-index: 9999;
background: rgba(0,0,0,.7);
color: #fff;
border-radius: 0.1rem;
}
</style>
toast.js
import Toast from './toast.vue'
let toastPlugin = {};
toastPlugin.install = function (Vue) {
let instance;
// 在Vue的原型上扩展方法
Vue.showToast = Vue.prototype.$showToast = function (toastVal, time = 1000) {
// Vue构造器,创建一个“子类”
const ToastConstructor = Vue.extend(Toast);
// 判断当前实例是不是已经存在
if (!instance) {
// 实例化插件并挂在到某一个元素上
instance = new ToastConstructor({
el: document.createElement('div'),
data () {
return {
toastVal: toastVal,
toastShow: false
}
}
});
// 添加在body内
document.body.appendChild(instance.$el);
}
if (instance.toastShow) return;
instance.toastShow = true;
instance.toastVal = toastVal;
let timer = setTimeout(res => {
clearTimeout(timer);
instance.toastShow = false;
}, time);
};
};
export default toastPlugin
**全局调用$toast方法就是触发了绑定在Vue原型上的showToast方法,
首先在main.js中引入并使用插件
import toastPlugin from './plugins/toast/toast'
Vue.use(toastPlugin )
vue文件中使用方法如下:
this.$showToast('这是一个tast弹窗',2000)
http.js中使用方法如下
import Vue from 'vue'
Vue.showToast('会话超时')
网友评论