preliminary/src/common/Tiptoast.vue

<template>
    <portal to="notification-outlet">
      <div class="toast-wrap" v-if="show">
            <div class="content">
              <p class="tit" v-show="data.title">{{data.title}}</p>
              <div class="text">
                {{data.text}}
              </div>
                <img src="../images/icon_close@2x.png"  class="close" @click="handleClose">
            </div>
            
            <div class="mask" @click="handleClose"></div>
      </div>
    </portal>
</template>
<script type="text/javascript">
/**
  提示性弹窗组件
  接收参数：
    show-布尔值，是否显示弹窗；
    data-对象，包含title和text；
    @close-关闭弹窗的方法（点击关闭按钮或者遮罩都关闭弹窗）
**/
  export default {
    name:'Tiptoast',
    data(){
      return {
        msg:""
      }
    },
    props:{
      show:{
        default:false,
        type:Boolean
      },
      data:{
        default:{
          title:'',
          text:''
        },
        type:Object
      },
    },
    methods:{
      handleClose(){
        this.$emit("close")
      },
    },
  }
</script>
<style lang="less" scoped>
  @import '../less/base.less';
  .toast-wrap{
    .content{
      width: 6rem;
      background: #fff;
      z-index: 999;
      position: fixed;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: .5rem .8rem .8rem;
      box-sizing: border-box;
      border-radius: .20rem;
      z-index: 1000;
      .tit{
        font-family:PingFangSC;
        color:#333333;
        font-size: .32rem;
        text-align: center;
        font-weight: 700;
      }
      .text{
        color:#colors[quest];
        padding-top: .3rem;
        font-size: .3rem;
      }
      .close{
        width:1rem;
        position: absolute;
        bottom: -1.5rem;
        left: 50%;
        margin-left: -.5rem;
      }
    }
    .mask{
      .mask;
      z-index: 999;
    }
  }
</style>