一、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进行判断做什么操作了。