vue自定义提示框

1. 提示框组件

<template>
  <div class="alsrtInfo" :style="{display: visible}">
    <div class="profPrompt_test">
      <div>{{tipsContent}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: "none",
      tipsContent: ""
    };
  },
  methods: {
    // 提示弹框
    showDialog(value) {
      this.visible = "block";
      this.tipsContent = value;
      // 延迟2秒后消失
      window.setTimeout(() => {
        this.visible = "none";
      }, 2000);
    }
  }
};
</script>
<style lang="scss" scoped>
.alsrtInfo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  .profPrompt_test {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    overflow: hidden;
    color: #fff;
    position: absolute;
    background: rgba(74, 74, 74, 0.9);
    border-radius: 5px;
    border-radius: 5px;
    top: 356px;
    left: 50%;
    font-size: 14px;
    opacity: 1;
    /* z-index: 1; */
    text-align: center;
    transform: translate(-50%, -50%);
  }
}

</style>

<!-- 引用组件 -->
<Tips  ref="alertMsg"></Tips >

//引用
import Tips from "./Tips.vue";

//调用
this.$refs.alertMsg.showDialog("地址修改成功");

效果过图：

2. 自定义提示框和弹框
(1)新建一个mask.vue文件

<template>
  <div>
    <!-- 弹框 -->
    <div class="mask" v-if="isShow && text.title">
      <div class="maskBox">
        <!-- 头部 -->
        <div class="head" v-if="text.title">
          <div class="title">{{ text.title }}</div>
          <div class="close" v-if="text.showClose" @click="confirm">✖</div>
        </div>
        <!-- 信息 -->
        <div class="message">{{ text.msg }}</div>
        <!-- 按钮 -->
        <div
          class="button"
          v-if="showCancel || showConfirm"
          :style="showCancel || showConfirm ? 'width:160px' : ''"
        >
          <div class="btn_cancel" @click="cancel" v-if="showCancel">
            <span>{{ text.cancel }}</span>
          </div>
          <div class="btn_confirm" @click="confirm" v-if="showConfirm">
            <span>{{ text.confirm }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 信息提示 -->
    <div class="tip mask" v-if="isShow && !text.title">
      <div class="tipBox maskBox">
        <div class="message">{{ text.msg }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      text: {
        // title: "",
        // msg: "",
        // showClose: false,
        // duration: 1500,
        //   confirm: "",
        //   cancel: ""
      },
      showCancel: false, //是否显示取消按钮
      showConfirm: false //是否显示确认按钮
    };
  },
  watch: {
    text(value) {
      this.text = value;
      console.log(value);
      this.init();
    }
  },
  methods: {
    init() {
      let showCancel = false,
        showConfirm = false;
      const { cancel, confirm } = this.text;
      if (cancel) {
        showCancel = true;
      }
      if (confirm) {
        showConfirm = true;
      }
      this.showCancel = showCancel;
      this.showConfirm = showConfirm;
    },
    cancel() {
      this.isShow = false;
    },
    confirm() {
      this.isShow = false;
    }
  }
};
</script>
<style scoped lang="scss">
//弹框样式
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba(117, 116, 116, 0.4);
  .maskBox {
    background: #ffffff;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    .head {
      padding: 10px;
      position: relative;
      border-bottom: 1px solid #ccc;
      .title {
        font-size: 12px;
      }
      .close {
        position: absolute;
        cursor: pointer;
        font-size: 14px;
        right: 5px;
        top: 5px;
        line-height: 20px;
        color: rgb(189, 184, 184);
        &:hover {
          color: rgb(207, 201, 201);
        }
      }
    }
    .message {
      padding: 20px 15px;
      text-align: center;
    }
    .button {
      padding: 10px 15px;
      display: flex;
      justify-items: center;
      justify-content: flex-end;
      border-top: 1px solid #ccc;
      .btn_cancel,
      .btn_confirm {
        padding: 4px 10px 5px 10px;
        border-radius: 2px;
        color: #fff;
        cursor: pointer;
        min-width: 25px;
        text-align: center;
      }
      .btn_confirm {
        background-color: #409eff;
        border-color: #409eff;
        margin-left: 20px;
        &:hover {
          background-color: #62affd;
          border-color: #62affd;
        }
      }
      .btn_cancel {
        color: #333;
        background-color: #dcdfe6;
        border-color: #dcdfe6;
        &:hover {
          background-color: #e6eaf3;
          border-color: #e6eaf3;
        }
      }
    }
  }
}
//提示样式
.tip {
  background: none;
  .tipBox {
    border-radius: 0;
    .message {
      padding: 8px 15px;
      color: #fff;
      border-radius: 3px;
      background: rgba(0, 0, 0, 0.6);
    }
  }
}
</style>

(2)新建一个tips.js文件

import Vue from "vue";
import mask from "./mask";
let maskConstructor = Vue.extend(mask);
let theMask = function(text) {
  return new Promise((res, rej) => {
    //promise封装，ok执行resolve，no执行rejectlet
    let textDom = new maskConstructor({
      el: document.createElement("div")
    });
    document.body.appendChild(textDom.$el); //new一个对象，然后插入body里面
    const { duration, title } = textDom.text;
    if (typeof text == "string") {
      //只有一条消息
      textDom.text = {
        msg: text
      };
      timer(duration, textDom);
    } else {
      textDom.text = Object.assign({}, text);
    }
    //有duration或无title则定时关闭
    if (duration || !title) {
      timer(duration, textDom);
    }

    textDom.confirm = function() {
      res();
      textDom.isShow = false;
    };
    textDom.cancel = function() {
      rej();
      textDom.isShow = false;
    };
  });
};
export default theMask;
//公用延迟
function timer(duration, textDom) {
  window.setTimeout(() => {
    textDom.isShow = false;
  }, duration || 1500);
}

//main.js
import Vue from "vue";
import tips from "./components/tips";

Vue.prototype.$tips = tips;

（3）1.调用弹框

 this.$tips({
   title: "提示",
    msg: "我正在测试当中",
    showClose: true,
    confirm: "确定",
    cancel: "取消"
  });
  // .then(() => {
  //   console.log("点击确定按钮");
  // })
  // .catch(() => {
  //   console.log("点击取消按钮");
  // });

弹框效果如下：

（3）2.调用提示框

this.$tips( "我正在测试提示框");

提示框效果如下