vue 提示弹框

分享一个很好用的提示弹框（几秒消失的那种）

非常适用于前端内容增删改查成功或失败后的提示语

templet 中的 Dom

<div class="alsrtInfo" :style="{display: displayStsates}" ref="alertMsg">
    <div class="profPrompt_test">{{aletMsg}}</div>
</div>

 script 中的 data 和 methods

// data 中 增加
     aletMsg: '', // 弹出框中的提示语
     displayStsates: 'none'
// methods 中
    // 提示弹框
    alertDia (msg) {
      this.displayStsates = 'block'
      this.aletMsg = msg
      // 延迟2秒后消失 自己可以更改时间
      window.setTimeout(() => {
        this.displayStsates = 'none'
      }, 2000)
    },
// 直接调用，会弹出两秒自动关闭
    this.alertDia(aletMsg)

 css 中的样式 ，可以根据项目风格做适当修改 ，用的 scss 格式

  .alsrtInfo{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    .profPrompt_test{
      padding: 30px 10px;
      width: 480px;
      overflow: hidden;
      line-height: 28px;
      border: 1px solid #4eb6d3;
      color: #4eb6d3;
      position: absolute;
      background-color: #fbfbfb;
      top: 356px;
      left: 50%;
      font-size: 14px;
      font-family: Gotham-Book;
      opacity: 1;
      /* z-index: 1; */
      text-align: center;
      transform: translate(-50%, -50%);
    }
  }