vue封装一个toast弹窗在js中调用

最新推荐文章于 2024-08-07 21:53:27 发布

临江仙~

最新推荐文章于 2024-08-07 21:53:27 发布

阅读量2.4k

点赞数 2

分类专栏： vue 文章标签： toast弹窗 vue组件封装

本文链接：https://blog.csdn.net/Yilia__/article/details/95216041

版权

本文介绍了如何在Vue中封装一个toast弹窗组件，并通过js动态调用。详细步骤包括编写Toast.vue组件，创建index.js以实现弹出功能，以及在Vue入口文件注册组件，使得在页面中可以方便地使用this.$toast('msg')显示提示信息。

摘要由CSDN通过智能技术生成

实现一个基于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