vue -提示框组件的封装-蒲公英云

vue -提示框组件的封装

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>
<style lang="css" scoped>
.toast {
  position: fixed;
  top: 40%;
  left: 43%;
}
.toast .desc {
  width: 60%;
  font-size: 20px;
  color: #fff;
  padding: 18px 24px;
  background: rgba(0, 0, 0, 0.51);
  border-radius: 15px;
}
</style>

3、使用方式

<template>
  <div class="login">
      //    使用
    <Toast :status="toastStatus" :tips="tips" @clearTimer="clearTimer" :timer="timer"></Toast>
  </div>
</template>
<script>
// 引入
import Toast from "../components/toast";
export default {
  data() {
    return {
      toastStatus: false, // 提示框
      timer:3000,
      tips: "请输入fgdgjdljkljkl账号"
    };
  },
  components: {
    Toast
  },
  methods: {
      clearTimer(val){
          this.toastStatus = val;
      }
  }
};
</script>