vue-定时器-element的notify提示框-自定义样式
系统要实现一个简单的异常日志提示框，决定使用定时器，每隔2秒向后端发送请求
效果图：
登录后，开启定时器
data() {
return {
isExistNo: false,
timer:null, //定时器名称
};
},
created() {
const _this = this;
this.timer = window.setInterval(() => {
_this.$api.post(_this.$lesUiPath.msgAlert).then(result => {
if (result !== "") {
if (_this.isExistNo) {
// console.log("已存在提示框...");
} else {
_this.isShowNotify(result);
_this.isExistNo = true;
}
}
});
}, 2000);
// 通过$once来监听定时器
// 在beforeDestroy钩子触发时清除定时器
this.$once("hook:beforeDestroy", () => {
window.clearInterval(this.timer);
this.timer = null;
// console.log("离开页面，定时器销毁...")
});
},
methods: {
isShowNotify(result) {
this.$notify({
title: "提示",
type: "warning",
dangerouslyUseHTMLString: true,
onClose: () => {
// console.log("点击关闭...");
this.isExistNo = false;
},
message: this.$createElement("div", null, [
this.$createElement("div", null, [
this.$createElement("span", null, result)
]),
this.$createElement("div", null, [
this.$createElement(
"button",
{
style: {
padding: "8px 16px",
margin: "10px 12px 0px 2px",
textAlign: "center",
textDecoration: "none",
display: "inline-block",
webkitTransitionDuration: "0.4s",
transitionDuration: "0.4s",
cursor: "pointer",
backgroundColor: "#ea8f28",
color: "white",
// border: '2px solid ##ea8f28',
borderRadius: "6px"
},
on: {
click: () => {
this.go(result);
},
mouseout: function(e) {
e.target.style.backgroundColor = "#ea8f28";
// e.target.style.border = '2px solid #ea8f28';
},
mouseover: function(e) {
e.target.style.backgroundColor = "rgba(234, 143, 40, 0.8)";
}
}
},
"立即处理"
)
])
]),
duration: 0,
position: "bottom-right"
});
},
go(data) {
this.$router.push({
path: "/a/b/c" });
},
},