【VUE+Elemet 】Message消息提示每次只弹出一个 + 设置全局message弹框的格式+Message距离窗口顶部的偏移量

问题

• Element UI的Message消息提示是点击一次触发一次的,如果一直点，然后就会出现打开多个的情况。
• 在后台弹消息的时候，也会同时出现
• 设置全局message弹框的格式
• Message距离窗口顶部的偏移量

Message消息提示每次只弹出一个 + 设置全局message弹框的格式

在main.js平级建立文件夹，其中新建message.js

message.js:

/**防止重复点击重复弹出message弹框 */
import {
  Message
} from 'element-ui';
let messageInstance = null;
const resetMessage = (options) => {
  if (messageInstance) {
    messageInstance.close()
  }
  messageInstance = Message(options)
};
/**设置message弹框的格式 */
['error', 'success', 'info', 'warning'].forEach((item) => {
  resetMessage[item] = (msg) => {
    return Message({
      showClose: true,
      duration:2000,
      type: item,
      message: msg
    })
  }
})
export const message = resetMessage

main.js：

import {message} from './request/message.js';
Vue.prototype.$message = message;

Message距离窗口顶部的偏移量

public.css:

.el-message {
  top: 48%!important
}

注意
因为使用了new DonMessage()的原因，所以导致this.$message(options)的方式无法使用。所以推荐使用this.$message.success(‘成功提示’)或者this.$message.success(options)的方式进行调用。具体参数可以查看官方文档。