vue(element-ui组件) 的this.$notify的具体使用

        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、大家有什么问题,可以在评论区评论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/388228.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB(6)水纹碰撞覆盖地形

前言 在MATLAB中模拟水纹(如水波)碰撞并覆盖地形的效果涉及到几个复杂的步骤,包括地形的生成、水波的模拟(通常使用波动方程)以及两者的交互。下面我将给出一个简化的示例,展示如何在MATLAB中创建一个基本的…

文献综述过程如何有助于综合各种来源的信息

VersaBot生成文献综述 文献综述过程在通过几个关键机制综合各种来源的信息方面发挥着至关重要的作用; 1. 批判性评估和比较: 你不能简单地单独总结每个来源;你积极地比较和对比他们的发现、方法和理论观点。这可以帮助您识别每个来源的共性…

安卓项目结构与日志工具

文章目录 安卓的项目结构app目录下的结构安卓的日志工具 安卓的项目结构 首先需要切换称Project模式。 .gradle和.idea :这两个目录下放置的都是Android Studio自动生成的一些文件,我们无须关心,也不用编辑。 app :项目中的代码、…

齿轮表面缺陷检测方案

齿轮是一种机械传动元件,通常由具有齿条的圆盘或圆柱体组成,用于传递动力和运动。齿轮通过齿与齿之间的啮合,将动力从一个轴传递到另一个轴,实现速度和扭矩的传递。齿轮通常用于机械设备、车辆传动系统和各种工业机械中。 齿轮通…

【网络世界】传输层协议

🌈前言🌈 欢迎收看本期【网络世界】,本期内容讲解TCP/IP协议栈中的传输层协议,即UDP协议和TCP协议。包含了他们的协议格式,特点等。介绍他们的应用场景,最后对比TCP与UDP协议。此外,还将介绍套接…

电商 API 接口的最佳实践与案例分析

在当今数字化的商业世界中,电商平台的发展日新月异,而 API 接口在其中扮演着至关重要的角色。通过合理地利用电商 API 接口,企业能够实现更高效的运营、更优质的用户体验以及更强大的业务拓展能力。本文将深入探讨电商 API 接口的最佳实践&am…

换根dp学习总结3

我也不想搞这么多,但是这东西真的太难了,因为我还是个蒟蒻。算了蒟蒻继续写这次的总结了 寻找全图最远路径问题——Computer ——题目来源于hdu2196 题意:题目就是说会输入多组数据,每组数据给你一个n,表示结点的总数…

SEO优化之a标签rel属性的使用

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storm…

每日一题 ~乘积最大子数组

. - 力扣(LeetCode). - 备战技术面试?力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/maximum-product-subarray/description/ 题目分析 题目要求找出给定整…

基于SpringBoot+Vue的热门网游推荐网站(带1w+文档)

基于SpringBootVue的热门网游推荐网站(带1w文档) 基于SpringBootVue的热门网游推荐网站(带1w文档) 本系统选用B/S结构开发,它是一个提供可以对热门网游推荐进行信息管理的系统,用户可以在该系统获取最新动态,可以结识更多的朋友,产…

基于级联深度学习算法在双参数MRI中检测前列腺病变的评估| 文献速递-AI辅助的放射影像疾病诊断

Title 题目 Evaluation of a Cascaded Deep Learning–based Algorithm for Prostate Lesion Detection at Biparametric MRI 基于级联深度学习算法在双参数MRI中检测前列腺病变的评估 Background 背景 Multiparametric MRI (mpMRI) improves prostate cancer (PCa) dete…

SDK 多版本管理控制利器 SDKMAN 介绍及使用

一、SDKMAN 假如你同时参与了一个使用JDK 8的项目和一个采用JDK 17特性的项目。每次在两个项目之间切换时,你都面临着版本冲突的问题。如果有那么一个工具类似于 Python 中的 anaconda 工具,可以帮助你管理不同版本的 SDK ,是不是非常有用&a…

八股文无用?也许是计算机大学生的重要人生指南!

大家所说的"八股文"其实指的是那些固定、标准化的面试问题和答案,通常涉及特定的知识点和技术概念。 博主本人也是一枚大学生,个人也记背过相关的八股文,比如计算机网络里的TCP和UDP的区别、TCP三次握手和四次挥手的具体过程等等&a…

汽车电子KL15,KLR,KL30等术语解释

KL作为术语,是德语’klemme’的缩写,代表连接器或连接 缩略词解释KL15汽车电源的RUN模式KL50汽车电源的Crank模式KLR汽车电源的ACC模式KL30汽车蓄电池的正极,始终保持带电状态KL31汽车蓄电池的负极,持续与车辆接地连接KL4048V汽车…

遇到Websocket就不会测了?别慌,学会这个Jmeter插件轻松解决....

websocket 是一种双向通信协议,在建立连接后,websocket服务端和客户端都能主动向对方发送或者接收数据,而在http协议中,一个request只能有一个response,而且这个response也是被动的,不能主动发起。 websoc…

OpenCV C++的网络实时视频流传输——基于Yolov5 face与TCP实现实时推流的深度学习图像处理客户端与服务器端

前言 在Windows下使用TCP协议,基于OpenCV C与Yolov5实现了一个完整的实时推流的深度学习图像处理客户端与服务器端,为了达到实时传输的效果,客户端使用了多线程的方式实现。深度学习模型是基于onnxruntime的GPU推理。,实现效果如…

微服务架构三大利器:限流、降级与熔断

文章目录 前言一、限流(Rate Limiting)二、降级(Degradation)三、熔断(Circuit Breaker)四、三者关系总结 前言 限流、降级和熔断是分布式系统中常用的容错策略,它们各自承担着不同的角色&#…

干货 | 2024中国联通算力网络安全白皮书(免费下载)

本白皮书以国家整体安全观为指导,充分发挥网络安全现代产业链链长的主体支撑和融通带动作用,提出算力网络“新质安全、共链可信”的安全愿景和“构建开放融合内生免疫弹性健壮网安智治的一体化安全”的安全目标。从运营商开展网络建设和应用部署的角度出…

WebWorker处理百万数据

Home.vue <template><el-input v-model"Val" style"width: 400px"></el-input><el-button click"imgHandler">过滤</el-button><hr /><canvas id"myCanvas" width"500" height&quo…

Linux系统之DHCP服务配置

1、准备阶段 Windows&#xff08;客户端&#xff09;开启Vmnet8网卡Linux6&#xff08;服务端&#xff09;网络连接选择NAT模式&#xff0c;并配置IP地址为192.168.11.1/24Linux5&#xff08;客户端&#xff09;网络连接选择NAT模式将NAT的DHCP功能取消 2、DHCP服务器相关软件…