书写一个消息提示框

1.注册入口js

import Vue from "vue";
import BlogMessage from "./BlogMessage.vue";
const MessageBox = Vue.extend(BlogMessage);
import router from "@/router"


// function AModal() {


function AModal() {
    return function(obj) {

        let VM = null
        if (!obj) return
        if (!VM) {
            const oDiv = document.createElement('div')
            VM = new MessageBox({ el: oDiv, router })
            document.body.appendChild(VM.$el)

        }
        VM.msg = obj.msg
        VM.title = obj.title
        VM.visible = true
        VM.url = obj.url
    }
}

let showBlogMessage = AModal()
export default showBlogMessage;

2.书写vue组件

<!--
消息提示组件
调用方法：this.$BlogMessage({
       msg: "default", //内容
    title: "提示信息", //标题
    url: "", //跳转路径
})
-->

<template>
  <div class="messageRight">
    <div class="message" v-if="visible">
      <div class="messageTop">
        <span>{{ title }}</span>
        <i class="el-icon-close" @click="visible = false"></i>
      </div>
      <div>&emsp;&emsp;{{ msg }}</div>
      <div class="messageButton">
        <el-button style="margin-right: 10px" type="primary" @click="toview(url)">查看</el-button>
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    visible: false, // 控制 DOM 显示隐藏
    msg: "default", // 默认的 text 为空, 由外部传入
    title: "提示信息", //标题
    url: "", //跳转路径
  },
  methods: {
    toview(url) {
      this.$router.push(url)
      this.visible = false;

    }
  }
};
</script>
<style lang="scss" scope>
.message {
  position: fixed;
  right: 5px;
  bottom: 5px;
  z-index: 1999;
  width: 300px;
  background: #fff;
  box-shadow: 0 0 10px #dcdcdc;
  animation: show 1.5s;
  .messageTop {
    display: flex;
    justify-content: space-between;
    background: #ffb900;
  }
  div {
    padding: 10px;
  }
  .messageButton {
    display: flex;
    justify-content: center;
  }
  @keyframes show {
    0% {
      right: -300px;
    }

    100% {
      right: 5px;
    }
  }
}
</style>