element-ui基础组件-message

一、message组件

1.避免重复弹窗

（1）element-ui

this.$message.closeAll();

this.$message.error('请勿重复添加根节点！');

（2）antd-design

message.destroy();

message.error('请勿重复添加根节点！');

（3）若项目中出现场景较多，建议全局配置js。

第一步:新建optimizePop.js

// 重置 message，防止重复点击重复弹出 message 弹框
import { Message } from 'element-ui'
let messageInstance = null
const mainMessage = options => {
  // 如果弹窗已存在先关闭
  if (messageInstance) messageInstance.close()
      messageInstance = Message(options)
}
const arr = ['success', 'warning', 'info', 'error']
arr.forEach(type => {
  mainMessage[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return mainMessage(options)
  }
})
const message = mainMessage
export default message

第二步：main.js添加两行代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import message from '@/util/optimizePop.js' //引入

Vue.use(ElementUI);
Vue.prototype.$message = message //重写message提示框，注意: 此行代码一定要放在vue.use(ElementuI)后面，否则不生效

二、插件this.$confirm（类似message的vue element）

补充：区分取消按钮和关闭esc键盘

默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 ‘cancel’（普通弹出框中的点击取消时的回调参数）。如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。（注意：如果没有设置distinguishCancelAndClose为true，则都默认为取消）

这样就可以在catch中拿到回调参数action进行判断做什么操作了。