preliminary/src/common/Toast.vue

<template>
    <portal to="notification-outlet">
      <div class="toast-wrap" v-if="show">
            <div class="content">
              <div class="title">温馨提示</div>
              <div class="text" v-html="message||msg">
                <!-- {{message||msg}} -->
              </div>
              <div class="btn">
                <span @click="comfirn" class="comf">确定</span>
                <span @click="cancel" class="canc">取消</span>
              </div>
            </div>
            <div class="mask" @click="cancel"></div>
      </div>
    </portal>
</template>
<script type="text/javascript">
import $ from 'jquery';
  export default {
    name:'Toast',
    data(){
      return {
        msg:"是否删除该信息?"
      }
    },
    props:['message','show','labShow'],
    methods:{
      comfirn(){
        $(".btscroll").css({'position':'absolute','top':'0'})
        $(".foot").css({'position':'absolute','bottom':'0'})
        this.$emit("comfirn")
      },
      cancel(){
        $(".btscroll").css({'position':'absolute','top':'0'})
        $(".foot").css({'position':'absolute','bottom':'0'})
        this.$emit("cancel")
      },
    },
  }
</script>
<style lang="less" scoped>
  @import '../less/base.less';
  .toast-wrap{
    .content{
      width: 6.3rem;
      background: #fff;
      z-index: 999;
      position: fixed;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 0.6rem 0.6rem 1.5rem;
      box-sizing: border-box;
      border-radius: .2rem;
      z-index: 1000;
      overflow: hidden;
      .title {
        font-size: .32rem;
        text-align: center;
        font-weight: 800;
      }
      .text{
        color:#colors[quest];
        text-align: center;
        padding-top: .4rem;
        font-size: .3rem;
      }
      .btn{
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 6.3rem;
        height: .88rem;
        line-height: .88rem;
        border-top: 1px solid #colors[line];
        // font-weight: bold;
        span{
          display: inline-block;
          width: 50%;
          text-align: center;
          font-size: .32rem;
        }
        .comf{
          border-right: 1px solid #colors[line];
          box-sizing: border-box;
          color: #FF6167;
        }
        .canc{
          color: #333333;
        }
      }
    }
    .mask{
      .mask;
      z-index: 999;
    }
  }
</style>