vue的toast组件封装

思路很简单：

样式思路：

1.设置一个一定大小的盒子，然后给盒子设置背景颜色，再设置文字颜色，再来个固定定位脱离文档流就好了。

代码逻辑思路：

设置一个属性，控制toast弹出的状态显示与否，然后在设置个定时器，过一定事件，修改toast组件为不可见即可。

代码：

    <template>
    <div class="toast" v-show="isShow">
      <div>{{message}}</div>
    </div>
  </template>
  <script>
    export default{
      name:'Toast',
      props:{
        // message:{
        //   type:String,
        //   default:''
        // }
      },
      data(){
        return{
          message:'',
          isShow:false
        }
      },
      methods: {
        show(message,duration=2000){
          this.isShow = true;
          this.message = message;
          setTimeout(() => {
            this.isShow = false;
            this.message = '';
          },duration)
        }
      },
    }
  </script>
  <style scoped>
   .toast{
     position: fixed;
     top:50%;
     left:50%;
     /* 根据自己本身宽高偏移 */
     transform: translate(-50%,-50%);
     padding:8px 10px;
     color: #fff;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 999;
   }
  </style>