vue项目开发时，需要消息提示位置自定义，如果直接修改element ui的message弹窗很多地方局限性很多，所以按照自己的想法自己手写了一个，调整起来也方便。

组件使用

<message ref="message"></message>
this.$refs.message.getMessage({
  message: '账号未注册，请注册！',
  type: 'error'
})

组件代码

/**
* @Author: 858834013@qq.com
* @Name: message
* @Date: 2022-08-15
* @Desc:
*/
<template>
  <div class="message">
    <transition name="custom-classes-transition" enter-active-class="animated slideInDown"
                leave-active-class="animated slideOutUp">
      <div class="success" v-if="type=='success' && show">
        <img src="./asset/success.png" alt="">
        <span>{{ message }}</span>
      </div>
    </transition>
    <transition name="custom-classes-transition" enter-active-class="animated slideInDown"
                leave-active-class="animated slideOutUp">
      <div class="error" v-if="type=='error' && show">
        <img src="./asset/error.png" alt="">
        <span>{{ message }}</span>
      </div>
    </transition>
  </div>
</template>

<script>

export default {
  name: "message",
  components: {},
  data() {
    return {
      show: false,
      interval: 3000,
      message: '',
      type: 'success'
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    getMessage(e) {
      this.type = e.type
      this.message = e.message ? e.message : 'success'
      this.interval = e.interval ? e.interval : 3000
      this.show = true
      this.getHide()
    },
    getHide() {
      var that = this;
      setTimeout(() => {
        that.show = false
      }, this.interval)
    }
  }
}
</script>

<style lang="scss" scoped>
.message {
  position: absolute;
  left: 40px;
  top: 90px;
}

.success {
  width: 340px;
  height: 50px;
  background: #F2FAE8;
  border-radius: 4px;
  border: 1px solid rgba(126, 211, 33, 0.2000);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  img {
    width: 18px;
    margin-left: 16px;
    margin-right: 8px;
  }

  span {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #7ED321;
  }
}

.error {
  width: 340px;
  height: 50px;
  background: #FCF2F3;
  border-radius: 4px;
  border: 1px solid rgba(208, 2, 27, 0.2000);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  img {
    width: 18px;
    margin-left: 16px;
    margin-right: 8px;
  }

  span {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #D0021B;
  }
}
</style>

将组件注册到全局

当我们的组件很多，并且需要进行组件间的传值比较麻烦，将组件注册到全局是不错的解决办法。vue 全局消息提示组件封装