自定义message

自己写一个message组件，这个只是简单的实现了一下

//这是js
import Message from "./Message.vue";
import Vue from "vue";
let MessageConstructor = Vue.extend(Message);
const MessageBox = (props) => {
  const instance = new MessageConstructor({
    data:props
  });
  instance.$mount();
  document.body.appendChild(instance.$el);
  instance?.show(props);
};
export default MessageBox;

//这是vue组件
<template>
  <div :class="['message-wrapper', type]" :style="{ top: top + 'px' }">
    <p class="message-content">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      type: 'default',
      top: 0
    }
  },
  beforeMount() {
    const warpper = document.getElementsByClassName('message-wrapper')
    this.top = warpper[warpper.length - 1]?.style?.top ? Number(warpper[warpper.length - 1]?.style?.top.replace('px', '')) + 60 : 0
  },
  methods: {
    show(props) {
      let { message = 'test', duration = 10000 } = props
      this.message = message
      setTimeout(() => {
        document.body.removeChild(this.$el)
      }, duration)
    }
  }
}
</script>

<style lang="scss" scoped>
.message-wrapper {
  position: absolute;
  left: 50%;
  min-width: 200px;
  padding: 12px 16px;
  text-align: center;
  border-radius: 4px;
  background: #FFF;
  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.04), 0px 20px 24px -4px rgba(16, 24, 40, 0.10);
  cursor: default;

  .message-content {
    color: #101828;
    font-size: 16px;
    font-weight: 600;
  }
}

.default {
  background-color: #edf2fc;
}

.success {
  background-color: #f0f9eb;
}
</style>

具体使用，全局注册一下

import MessageBox from './components/Message.js'
Vue.prototype.$message = MessageBox