vue Toast设计 案例

<template>
  <div id="Toast">
    <p class="msg">{{msg}}</p>
  </div>
</template>

<script>
  export default {
    name: 'Toast',
    data() {
      return {
        msg: 'hello Toast!',
      }
    }
  }
</script>

<style>
  #Toast {
    /* 生成绝对定位的元素，相对于浏览器窗口进行定位 */
    position: fixed;
    top: 50%;
    left: 50%;
    /* 定义 2D 转换。X 轴的值, Y 轴的值 */
    transform: translate(-50%, 50%);

    color: white;
    background-color: rgba(0, 0, 0, .8);
  }

  .msg {
    /* 上右下左 顺时针 */
    padding: 0 10px 0 10px;
  }
</style>