vue3.x全局toast、message、loading组件

Toast组件

• 在 src/components下创建toast文件夹，并依此创建index.vue和index.js

1、index.vue
一般toast会有如下功能：背景色、字体颜色、文本、停留时间

<template>
<div class="toast-box" >
    <p class="toast-value" :style="{background: background, color: color}">
        {
   {
    value }}
    </p> 
</div>
</template>    
<script>
    import {
    defineComponent } from 'vue'
    export default defineComponent({
   
        name: 'Toast',
        props: {
   
            value: {
   
                type: String,
                default: ''
            },
            duration: {
   
                type: Number,
                default: 3000
            },
            background: {
   
                type: String,
                default: '#000'
            },
            color: {
   
                type: String,
                default: '#fff'
            }
        }
    })
</script>

<style>
.toast-box  {
   
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
    .toast-value {
   
        max-width: 100px;
        background