如何封装一个toast

恩雨濛濛

于 2024-02-20 15:02:47 发布

阅读量459

点赞数 12

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_42173758/article/details/136190522

版权

本文介绍了如何在Vue应用中创建一个可配置的自定义提示组件，通过父子组件间的props和watch进行通信，实现父组件在特定条件下触发子组件显示并自动隐藏的效果。

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

父组件

<template>
</template>
<script>
 import SelfToast from '@/T0xAC/components/common/selfToast.vue'
  export default  {
        components: {
            WxSwitch,
            CurveCommon,
            mideaHeader,
            SelfToast
        },
      
        data() {
            return {
                trigger:false,
              
            };
        },
        created() {
            globalEvent.addEventListener('receiveMessage', (data) => {
            });
        },
        mounted() {
           setTimeout(() => {
            this.trigger=true
    
          }, 1000)
       
        },
        methods: {
           

        };
<script>

子组件

<template>
    <div class="overlay" v-if="toast">
        <text class="textStyle">{{showMsg}}</text>
    </div>
</template>
<script>
    export default {
        name: "self-toast",
        props: {
            showMsg:{
                type: String,
                default: "默认"
            },
            trigger:{
                type: Boolean,
                // default: ""
            }
        },
        data: () => ({
            toast:false,
            timeOut:0
        }),
        watch: {
            trigger:function(news,olds) {
                if (news != olds) {
                    this.toast = true;
                    // this.showMsg='设定风速已是最小限制';                    
                    clearTimeout(this.timeOut);
                    this.timeOut = setTimeout(()=>{
                        this.toast=false;
                    },1200)
                }
            }
        }

    }
</script>

<style scoped>
.overlay {
    width: 750px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.textStyle {
    background-color: #000000;
    padding-top: 26px;
    padding-left: 64px;
    padding-right: 64px;
    padding-bottom: 26px;
    color:rgba(255,255,255,0.8);
    font-size: 28px;
}
</style>