实现一个基于vue直接跟js交互的toast弹窗插件
最终完成的效果图如下:
1.先写一个Toast.vue组件
文件位置 /src/components/common/toast/Toast.vue
<template>
<div class="wrap" v-if="show" :class="showContent ?'fadein':'fadeout'">{
{text}}</div>
</template>
<style scoped>
.wrap{
position: fixed;
left: 50%;
bottom:10%;
background: rgba(0,0,0,0.5);
padding:0 20px;
border-radius: 5px;
height:30px;
line-height:30px;
transform: translate(-52%,50%);
color:#fff;
font-size:16px;
}
.fadein {
animation: animate_in 0.35s;
}
.fadeout {
animation: animate_out 0.35s;
opacity: 0;
}
@keyframes ani