<template>
  <div class="msg-dialog">
      <div class="msg-container" :class="{active:msgStatus}">
          <div class="msg-wrapper">
              {{text}}
          </div>
      </div>
  </div>
</template>

<script>
import { clearInterval } from 'timers';
export default {
    name:'vue-msg-dialog',//使用时，使用就是这个name
    props:{
        msg:String
    },
    data() {
        return {
            msgStatus:false,
            text:''
        }
    },
    methods: {
        msgPlugin(msg){
            let times;
            clearInterval(times)
            this.text = msg ; 
            this.msgStatus = true;
           times =  setTimeout(() => {
                this.msgStatus = false;
            }, 2000);
        }
    },

}
</script>

<style lang="scss" scoped>
.msg-container{
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,50%);
    width: 0;
    min-height:0;
    text-align: center;
    background: rgba(0,0,0,.5);
    color: azure;
    transform: all 0.5s;
    opacity: 0;
    border-radius: 20px;
    &.active{
        min-width: 200px;
        min-height: 150px;
        opacity: 1;

    }
}
</style>