当前位置:   article > 正文

element-ui,使用message防止多次提示,全局配置可关闭提示_element弹窗防止多个提示

element弹窗防止多个提示

情景:在我们使用message的时候每次操作成功,或者进行一些数据交互的时候会进行message提示,但是假如出现我们操作完成要异步继续进行其他操作,或者多次调用接口时这个时候一直提示对用户是很不友好的,我们只需要让他提示最后一次即可;

1:在untils文件夹下创建  oneMessage.js,完整代码如下

  1. import { Message } from 'element-ui';
  2. let messageInstance = null;
  3. const resetMessage = (options) => {
  4. if (messageInstance) {
  5. messageInstance.close();
  6. }
  7. options.showClose = true;
  8. messageInstance = Message(options);
  9. };
  10. ['error', 'success', 'info', 'warning'].forEach(type => {
  11. resetMessage[type] = options => {
  12. if (typeof options === 'string') {
  13. options = {
  14. message: options
  15. };
  16. }
  17. options.type = type;
  18. return resetMessage(options);
  19. };
  20. });
  21. export default resetMessage;

2:main.js全局进行注册(一定要放在element引入之后去覆盖掉)

即 Vue.use(Element)之后

  1. Vue.use(Element, {
  2. size: Cookies.get('size') || 'medium'
  3. });
  4. import oneMessage from './utils/oneMessage';
  5. Element.Dialog.props.lockScroll.default = false; // 打开弹窗防止页面抖动
  6. Vue.prototype.$message = oneMessage;

3:在 .vue文件即可正常使用

this.$message.error('您不能审核自己的出入金');

!!!注意:

全局也在使用message去全局拦截提示等操作,也要修改

  1. import oneMessage from '../utils/oneMessage';
  2. oneMessage({
  3. message: res.message||'操作成功',
  4. type: 'error',
  5. duration: 5 * 1000
  6. });

结束~~

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/104895
推荐阅读
相关标签
  

闽ICP备14008679号