新项目采用了Vue3+Vite开发，在自己封装Toast弹窗的时候，忽然发现，Vue3没有eventBus了，它移除了移除了$emit,$on等方法，百度了半天，找到一篇能用的文章， www.jianshu.com/p/a6aea71cf… ，但是这个不太适合我的项目，它的弹窗显示和隐藏是使用document.body.appendChild，这样我不太好设置淡入淡出的动画效果，后来我想到一个法子：既然Vue挂载不了了，那我把这个方法挂载到window下去，在APP.js引入就好了，不过挂载到window终究是不太合适，因为可以在控制台直接打印出来，以后我找到了别的方式会替换掉，下面是效果图：
整体添加了淡入淡出效果，懒得弄动图，将就着脑补一下吧，下面贴出代码：
components/toast.vue
<template>
<Transition name="fade">
<div id="favok" class="darkTip" v-show="visible">
<div class="darktip-wrap">
<span class="darktip-ico iconfont icon-success" style="font-size: 0.36rem;"></span>
<div class="darktip-cont">{{ text }}</div>
</div>
<div class="toastDark"></div>
</div>
</Transition>
</template>
<script lang="ts">
export default { name: 'Toast' };
</script>
<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
const state = reactive({
visible: false,
text: '',
time: ''
});
const { visible, text } = toRefs(state);
onMounted(() => {
window.showToast = (text, duration = 2000) => {
clearTimeout(state.time);
state.text = text;
state.visible = true;
state.time = setTimeout(() => {
state.visible = false;
}, duration);
};
});
</script>
<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.4s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.toastDark {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
}
</style>
然后再APP.vue中引入：
使用的话，直接调用window.showToast即可：
