message消息提示和Notification通知组件的结合使用

message消息提示和Notification通知组件的结合使用

消息提示中超出文字内容部分会显示省略号，点击详情可以弹出通知框，代码如下

//打开message提示框
let mesage = res.data //接口获取的数据
this.$message({
	showClose:true,
	dangerouslyUseHTMLString: true,
	message:`<div class="tishi" style="display:flex;width:349px"><p style="width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block">${mesage}</p><a style="color:blue" οnclick="window.xiangqing">详情</a></div>`
})
//onclick ="console.log(this,window)尝试了很多次才出现可以点击的事件"

//打开消息提示框的详情事件
window.xiangqing = ()=>{
	//因为内容太多装不下，所以用正则表达式每36个字符就换行
	let temp = res.data.replace(/(.{36})+?/g,"$1\r\n");
	this.$notify.closeAll();//放在提示框前边，防止双击重复出现
	this.$notify.error({
		title:'错误消息提示',
		message: temp,
		position:'top-right',
		duration:5000,
		offset:200
	})
}