el-Message消息提示每次只弹出一个 + 设置全局message弹框的格式跳转并关闭

el-Message消息提示每次只弹出一个 + 设置全局message弹框的格式跳转并关闭

1.

// this.$messageSingle.warning(“请先补充工商信息，进行企业认证”);

但是使用this.$messageSingle.closeAll()，关闭不起作用，使用this.$messageSingle(false)，传入参数关闭不是很理想，有方式解决留言感谢。

import Vue from 'vue'
//element按需引入组件
import { Button,Popover,Select,Input,Tree,Table,Pagination,Form,Drawer,Upload,Row,Col,Icon,TableColumn,Tag,Dialog,Radio,RadioGroup,FormItem,Loading,Card,Option,Checkbox,Message,MessageBox,Tabs,TabPane,Cascader,DatePicker } from 'element-ui';
Vue.use(Button)
Vue.use(Popover)
Vue.use(Select)
Vue.use(Input)
Vue.use(Tree)
Vue.use(Table)
Vue.use(Pagination)
Vue.use(Form)
Vue.use(Drawer)
Vue.use(Upload)
Vue.use(Row)
Vue.use(Col)
Vue.use(Icon)
Vue.use(TableColumn)
Vue.use(Tag)
Vue.use(Dialog)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(FormItem);
Vue.use(Loading.directive);
Vue.use(Card);
Vue.use(Option);
Vue.use(Checkbox);
Vue.use(Cascader)
Vue.use(DatePicker)
// tabs控件
Vue.use(Tabs)
Vue.use(TabPane)

// Vue.prototype.$messageELement = Message
Vue.prototype.$confirmElement = MessageBox.confirm

//注释打开
// let messageInstance = null;
// const resetMessage = (options) => {
//   if (messageInstance) {
//     messageInstance.close();
//   }
//   Message.closeAll(); //手动关闭所有消息提示实例
//   messageInstance = Message(options);
//   // console.log(Message(options));
// };

// ["error", "success", "info", "warning"].forEach((type) => {
//   resetMessage[type] = (options) => {
//     if(options === false) {
//         Message.closeAll(); 
//         return;
//     }
//     if (typeof options === "string") {
//       options = {
//         showClose: true,
//         customClass: "messageIndex",
//         duration:0,
//         type: type,
//         message: options
//       };
//     } 
//     options.type = type;
//     return resetMessage(options);
//   };
// });

// export const message = resetMessage;
Vue.prototype.$messageSingle = message;

//main.js
// 按需引入element-ui
import './plugins/element.js'


//使用
 probationMessage() {
  const h = this.$createElement;
  this.$messageSingle({
    type: "warning",
    showClose: true,
    duration: 0,
    customClass: "messageIndex",
    message: h("p", null, [
      h("span", null, "请先补充工商信息，进行企业认证 "),
      h("i", { style: "color: teal" }, "VNode"),
    ]),
  });
  // this.$messageSingle.warning("请先补充工商信息，进行企业认证");
  // this.$messageSingle.success({message:'距离顶部200px',offset:200,})
},

2.推荐

1.
//事件触发先关闭弹窗，使用节流控制频繁触发
probationMessage: throttle ( function () {
      this.$messageElement.closeAll();
      setTimeout(() => {
          const h = this.$createElement;
          this.$messageElement({
            type: "warning",
            offset: 45,
            showClose: true,
            duration: 0,
            customClass: "messageIndex messageBg",
            message: h("p", {style:"padding-top: 1px"}, [
              h("span",{style:"color:rgba(255, 149, 44, 1)"}, "请先补充工商信息，进行企业认证"),
              h(
                "span",
                {
                  style:
                    "color: #409EFF;cursor: pointer; margin-left: 10px; margin-right: 250px;",
                  on: {
                    click: this.toCheck,
                  },
                },
                "去认证"
              ),
            ]),
          });
      }, 500);
    },1500),
    
//跳转关闭弹窗     
toCheck() {
  this.$messageElement.closeAll();
  this.$router.push({name: "Qualification"})
},
    
2.    
//app.vue中可以自定义样式
/* 更改el-message层级 */
.messageIndex {
  z-index: 9999 !important;
}
/* 自定义背景样式 */
.messageBg {
  /* background: #ffe5d3!important; */
  left: 0px !important;
  transform: translateX(0%) !important;
  i{
    font-size: 20px;
    margin-top: 2px;
    color: rgba(255, 149, 44, 1) !important;
  }
}    

3.
// 函数节流
export function throttle(fn, delay = 1000) {
  let timer
  return function () {
    let arg = arguments
    if (!timer) {
      timer = true
      fn && fn.apply(this, arg)
      setTimeout(() => {
        timer = false
      }, delay)
    }
  }
}