自己动手封装Toast插件

最新推荐文章于 2022-03-28 09:04:30 发布

小铃铛的打怪之路

最新推荐文章于 2022-03-28 09:04:30 发布

阅读量359

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_45814762/article/details/107631194

版权

本文介绍了如何在Vue中封装一个Toast组件，并将其转化为插件，以方便在多个页面中复用。首先展示了传统的组件封装方式，然后详细讲解了如何创建一个index.js文件并进行插件安装，使得全局可以轻松调用Toast。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上一张效果图:

普通的封装方式

我们第一步先要封装这么一个(Toast)组件
这里我把它封装在了src/components/common/toast/Toast.vue
在需要调用的地方引入Toast.vue组件

//Toast.vue
<template>
    <div class="toast" v-show="show">
        {
   {
   message}}
    </div>
</template>

<script>
    export default {
   
        name: "Toast",
        props: {
   
            message: {
   
                type: String,
                default: ''
            },
            show:{
   
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style scoped>
      .toast {
   
        position: fixed;
        width: 100px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0,