getNotify() {this.noClose();let message = "";message = this.itemData.map((ele) => {const text = "任务" + ele.title + "新增" + ele.num + "条言论";return this.$createElement("el-tooltip",{props: {content: text,placement: "top",disabled: text.length >= 34 ? false : true,},class: "item",},[this.$createElement("div",{class: "detailText",on: {click: () => this.skipDetails(ele),},},[this.$createElement("span", "任务"),this.$createElement("span",{ style: { color: "red" } },`"` + ele.title + `"`),this.$createElement("span", "新增"),this.$createElement("span",{ style: { color: "red" } },ele.num),this.$createElement("span", "条言论"),]),]);});this.notifications = this.$notify({dangerouslyUseHTMLString: true,position: "bottom-right",duration: 0,showClose: false,message: this.$createElement("div",{class: "contentAll",on: {scroll: () => this.onScroll, // 直接绑定滚动事件},},[this.$createElement("div",{ class: "contentHead" },// "这里是头部内容"[this.$createElement("div", { class: "my-custom-icon" }),this.$createElement("div",{ class: "my-custom-text" },"预警通知"),this.$createElement("div", {class: "el-icon-close my-custom-close",on: {click: this.noClose.bind(),},}),]),this.$createElement("div", { class: "contentDeatil" }, message),]),});setTimeout(() => {const _this = this;if (document.getElementsByClassName("contentAll")[0]) {document.getElementsByClassName("contentAll")[0].addEventListener("mouseenter", _this.handleMouseEnter);}}, 20);},
注意:1、写css样式不能加scoped 要在后面加上 !important才生效
.contentAll {position: fixed;right: 0px;bottom: 0px;background-color: #fff;z-index: 2000 !important;width: 359px !important;.contentHead {width: 100%;height: 40px !important;background-color: #0087ff;display: flex;flex-direction: row;align-items: center;position: relative;padding-left: 20px;box-sizing: border-box;.my-custom-icon {width: 20px !important;height: 20px !important;background-image: url("~assets/images/allwarning/warning.png");background-size: cover;background-repeat: no-repeat;background-position: center center;}.my-custom-text {font-size: 18px;color: #ffffff;margin-left: 10px;}.my-custom-close {font-size: 18px;color: #ffffff;position: absolute;right: 15px;cursor: pointer;}}.contentDeatil {min-height: 100px !important;max-height: 280px !important;padding-left: 20px !important;padding-right: 20px !important;box-sizing: border-box;overflow: auto;.detailText {width: 100%;font-size: 16px !important;line-height: 30px !important;margin-top: 15px !important;margin-bottom: 15px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;&:hover {text-decoration: underline;cursor: pointer;}}}}
2、大家有什么问题,可以在评论区评论