Toast 轻提示代码封装

Toast 轻提示

1、Toast vue代码

<template>
    <div class="toast" v-on:click="onToast">
        <!-- 文字提示 -->
        <div  class="toast_text">
            <p>{{text}}</p>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    text: String
  },
  methods: {
    onToast () {
      this.$emit('onToast')
    }
  }
}
</script>

<style scoped>
.toast{
    width: 70vw;height: 100vh;
    position: fixed;
    top: 0;left: 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 文字提示样式 */
.toast_text{
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.toast_text>p{
    margin: 0.1rem;
    color: white;
    text-align: center;
}
</style>

2、Toast vue逻辑代码

export default {
  components: {
    Toast
  },
  data () {
    return {
      // 提示框显示隐藏
      isToast: false,
      // 文本提示内容
      text:'文本提示内容'
    }
  },
  methods: {
    // 点击显示提示内容
    onClick () {
      this.isToast = true
      // 三秒后关闭提示内容
      setTimeout(() =>{
        this.isToast = false
      },3000);
    }
  }
}

@ cc