自己动手封装Toast插件

先上一张效果图:

普通的封装方式

1. 我们第一步先要封装这么一个(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,