第一步:新建文件夹 XXXXXXXXX.js
import { Message } from "element-ui";
let messageInstance = null;
var resetMessage = (options) => {
if (messageInstance) {
messageInstance.close();
}
messageInstance = Message(options);
};
resetMessage.close = function () {
if (messageInstance) {
messageInstance.close();
messageInstance = null;
}
};
["error", "success", "info", "warning"].forEach((type) => {
resetMessage[type] = (options) => {
if (typeof options === "string") {
options = {
message: options,
type: type,
};
}
options.type = type;
return resetMessage(options);
};
});
export const message = resetMessage;
第二步:在main.js 注册到vue实例中
import { message } from "你的js 文件路径";
Vue.prototype.$message = message;
第三不: 在页面上使用
// 调用 message
this.$message({
dangerouslyUseHTMLString: true,
duration: 0,
customClass: "myAddCard",
message:'<a style="color: #32AA9F;cursor: pointer;">XXXXXXXX</a>',
});
const myAddCard = document.getElementsByClassName("myAddCard");
for (var i = 0; i < myAddCard.length; i++) {
myAddCard[i].addEventListener("click", () => {
this.$message.close();
this.$router.push("你的路由地址");
});
}
// 关闭 message
this.$message.close();