vue -提示框组件的封装

最新推荐文章于 2023-03-17 11:36:23 发布

紫菀檀ss

最新推荐文章于 2023-03-17 11:36:23 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/LiaoFengJi/article/details/100296219

版权

本文将介绍如何封装一个Vue提示框组件，包括组件的效果展示、详细封装过程以及具体的使用方法，帮助开发者实现自定义的提示功能。

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

1、效果图：

在这里插入图片描述

2、子组件的封装

<template>
  <div class="toast" v-if="toastStatus">
    <span class="desc">{
  {tips}}</span>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      timers: 3000,
      toastStatus:false
    };
  },
  props: {
    timer: Number,
    status: Boolean,
    tips: String
  },
watch:{
    status(val){
        this.toastStatus = val;
        if(val){
            this.changeStatus();
        }
    }
},
  methods: {
    changeStatus() {
      let _this = this;
      _this.timers = _this.timer;
      
      setTimeout(function() {
        _this.toastStatus = false;
        _this.$emit('clearTimer',false);
      }, _this.timers);
    }
  }
};
</script