vue -提示框组件的封装

旧城等待， 2021-08-13 22:50 558阅读 0赞

#### 1、效果图： ####

![在这里插入图片描述][20190902153727819.png]

#### 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>

[20190902153727819.png]: /images/20210813/8a3ddb3d8fb042d8952f12f0a3258314.png