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>

 

上一篇:ansible实时数据同步


下一篇:toggle - vue 点击组件弹出组件(学习笔记)