preliminary/src/common/Toast.vue

<template>
    <portal to="notification-outlet">
      <div class="toast-wrap" v-if="show">
            <div class="content">
              <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'})
        this.$emit("comfirn")
      },
      cancel(){
        $(".btscroll").css({'position':'absolute'})
        this.$emit("cancel")
      },
    },
  }
</script>
<style lang="less" scoped>
  @import '../less/base.less';
  .toast-wrap{
    .content{
      width: 6.3rem;
      height: 3.52rem;
      background: #fff;
      z-index: 999;
      // position: absolute;
      position: fixed;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: .5rem;
      box-sizing: border-box;
      border-radius: .2rem;
      z-index: 1000;
      .text{
        color:#000;
        text-align: center;
        height: 1.25rem;
        // overflow-y: auto;
        padding-top: .2rem;
        font-size: .3rem;
      }
      .btn{
        margin-top: .30rem;
        padding: 0 .7rem;
        display: flex;
        justify-content: space-between;
        span{
          display: inline-block;
          width: 1.6rem;
          height: .70rem;
          line-height: .70rem;
          text-align: center;
          // color: #fff;
          font-size: .30rem;
          // background: -webkit-gradient(linear, right top, left top, from(#4F8BFF), to(#4F4FFF));
          // background: linear-gradient(right, #4F8BFF, #4F4FFF);
          // box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
          border-radius: .35rem;
        }
        .comf{
          color:#F64B44;
          border:2px solid rgba(246,75,68,1);
        }
        .canc{
          color: #4F50FF;
          border:2px solid rgba(79,80,255,1);
        }
      }
    }
    .mask{
      .mask;
      z-index: 999;
    }
  }
</style>