当前位置: 首页 > news >正文

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.lryc.cn/news/414009.html

相关文章:

  • c++ - 模拟实现set、map
  • 计算机网络-PIM协议基础概念
  • 优化PyCharm:让IDE响应速度飞起来
  • 对象转化为String,String转化为对象
  • SolverLearner:提升大模型在高度归纳推理的复杂任务性能,使其能够在较少的人为干预下自主学习和适应
  • PHP智能问诊导诊平台-计算机毕业设计源码75056
  • 数据结构初阶(c语言)-排序算法
  • 网络云相册实现--nodejs后端+vue3前端
  • 【JS】Object.defineProperty与Proxy
  • 《计算机网络》(第8版)第8章 互联网上的音频/视频服务 复习笔记
  • linux进程控制——进程替换——exec函数接口
  • Apache解析漏洞~CVE-2017-15715漏洞分析
  • Xilinx管脚验证流程及常见问题
  • 格雷厄姆的《聪明的投资者》被誉为“投资圣经”
  • TypeScript声明文件
  • .NET_WPF_使用Livecharts数据绑定图表
  • 一句JS代码,实现随机颜色的生成
  • 校园抢课助手【7】-抢课接口限流
  • char类型和int类型
  • C++参悟:stl中的比较最大最小操作
  • JAVA读取netCdf文件并绘制热力图
  • 数据结构——八大排序
  • 【Unity】RPG2D龙城纷争(十九)流程与UI界面(终章)
  • C#类和结构体的区别
  • 【RabbitMQ】RabbitMQ持久化
  • 算法刷题笔记 Kruskal算法求最小生成树(详细算法介绍,详细注释C++代码实现)
  • 5年经验的软件测试人员,碰到这样的面试题居然会心虚......
  • C#进阶-轻量级ORM框架Dapper的使用教程与原理详解
  • Windows图形界面(GUI)-MFC-C/C++ - 编辑框(Edit Control) - CEdit
  • 网络安全防御【IPsec VPN搭建】