element中Notification组件(this.$notify)自定义样式
1、自定义样式效果

2、vue代码
this.notifications = this.$notify({title: '',dangerouslyUseHTMLString: true,duration: obj.remindMethod==='3' ? 0:4500,customClass: 'notify-warning',offset: 50,showClose: false,message: this.$createElement("div",null,[this.$createElement("div",{class:'alertTile'}),this.$createElement("div",{class:'alertTile_1'},"报警"),this.$createElement("div",{class:'alertContant'},[this.$createElement("span","报警内容" + ":" + obj.data),this.$createElement("br",null,),this.$createElement("div",{class:'alertContant'},"报警时间:"+obj.time),]),this.$createElement("button",{class:'close_notify',on: {click: _this.closeNotify.bind(_this, obj.remindMethod),},},obj.buttonName),]),});
3、CSS、不能用scoped修饰
<style>.el-notification__content {margin-top:30px
}
.notify-warning {background-image: url("../../../assets/images/baojing_box_red.png") !important;background-size: 100% 100% !important;width: 420px !important;height: 120px !important;background-position-y: 0px !important;background-color: rgba(255, 255, 255, 0) !important;margin-top: 50px !important;border: none !important;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 0) !important;
}
.el-notification__group {margin-left: 130px !important;
}
.alertTile_1 {position: absolute !important;background-image: url("../../../assets/images/alert_red_3.png") !important;width: 128px !important;height: 128px !important;left: 0px !important;top: 0px !important;border-radius: 64px !important;color: white !important;line-height: 128px !important;text-align: center !important;position: relative;font-size: 16px !important;
}
.alertTile {position: absolute !important;background-image: url("../../../assets/images/alert_red_1.png") !important;width: 128px !important;height: 128px !important;left: 0px !important;top: 0px !important;border-radius: 64px !important;color: white !important;line-height: 128px !important;text-align: center !important;position: relative;-webkit-transform: rotate(360deg);animation: myfirst 3s linear infinite;-moz-animation: myfirst 3s linear infinite;-webkit-animation: myfirst 3s linear infinite;-o-animation: myfirst 3s linear infinite;font-size: 16px !important;
}.alertContant{word-wrap:break-word;color:white;
}@-webkit-keyframes myfirst {from {-webkit-transform: rotate(360deg);}to {-webkit-transform: rotate(0deg);}
}
.el-notification__closeBtn{top:25px
}.close_notify{color: #fff;cursor: pointer;width: 50px;height: 22px;line-height: 20px;background: #0f83f7;text-align: center;position: absolute;bottom: 15px;right: 5px;
}</style>
4、自定义关闭按钮
//点击事件回调closeNotify(type) {console.log("hahah");console.log(type);if(type === '2'){console.log("自动关闭,流程。。");}if(type === '3'){console.log("手动确认,流程。。");}this.notifications.close();},
5、使用到的图片
图片地址链接:
https://download.csdn.net/download/askuld/88282624
相关文章:
element中Notification组件(this.$notify)自定义样式
1、自定义样式效果 2、vue代码 this.notifications this.$notify({title: ,dangerouslyUseHTMLString: true,duration: obj.remindMethod3 ? 0:4500,customClass: notify-warning,offset: 50,showClose: false,message: this.$createElement("div",null,[this.$…...
Manjaro安装使用
Manjaro安装使用 1.先更改镜像源:sudo pacman-mirrors -c China -g 2.安装第三方软件管理工具 :sudo pacman -Sy yay 导入GPG Key sudo pacman -Syy && sudo pacman -S archlinuxcn-keyring安装输入法 sudo pacman -S fcitx-im (#默认全部安装…...
【iOS】折叠cell
文章目录 前言一、实现效果二、折叠cell的实现原理三、实现折叠cell的高度变化四、实现选中点击的单元格总结 前言 在暑假的3GShare中用到了折叠cell控件,特此总结博客记录 一、实现效果 二、折叠cell的实现原理 首先我们需要知道ScrollView的是TableView的父类&a…...
无涯教程-Android - DatePicker函数
Android Date Picker允许您在自定义用户界面中选择由日,月和年组成的日期。为此功能,android提供了DatePicker和DatePickerDialog组件。 在本教程中,我们将通过DatePickerDialog演示日期选择器的用法, DatePickerDialog是一个包含DatePicker的简单对话框。 为了显示DatePicker…...
经纬恒润荣获吉利汽车“最佳价值贡献”奖
8月18日,以“全面向新 共创共赢”为主题,吉利汽车在宁波成功举行2023年电子电器核心供应商恳谈会。经纬恒润凭借在项目合作上持续创新、高效协同等优异表现,获得“最佳价值贡献”奖项。 作为国产汽车代表性品牌之一,吉利汽车积极推…...
【多线程】lock与synchronized的区别
相同点: 1、他们都是Java中用于解决线程安全的工具,两者的性能相差不大 不同点: 1、在实现上synchronized引入了偏向锁、轻量级锁、重量级锁、锁升级来优化加锁的性能,而lock则使用自旋锁来实现性能的优化 2、synchronized是J…...
什么是RTC
参考: https://zhuanlan.zhihu.com/p/377100294 RTC(Real time communication)实时通信,是实时音视频的一个简称,我们常说的RTC技术一般指的是WebRTC技术,已经被 W3C 和 IETF 发布为正式标准。由于几乎所…...
BW 源/目标模型主键不一样,增量的作用
最近项目上,做了一个复杂的需求逻辑,源模型到目标模型,主键完全发生了变化。用转换的传统功能,我担心处理起来不方便就使用了专家历程(这个说明在之前有说过)。 项目上线后,发生很多异常事件。但…...
HK1 RBOX X4,Vontar X4,S905 X4 刷 ATV
准备工作 需要HK1 RBOX X4一个(内存版本不限 通刷),机顶盒电源,USB双公线一条(可以使用两个usb数据线剪开后相同颜色对接使用,最好使用电烙铁焊接一下更稳定),安装 INTEL CPU 运行 w…...
Rust 学习笔记(持续更新中…)
一、 编译和运行是单独的两步 运行 Rust 程序之前必须先编译,命令为:rustc 源文件名 - rustc main.rs编译成功之后,会生成一个二进制文件 - 在 Windows 上还会生产一个 .pdb 文件 ,里面包含调试信息Rust 是 ahead-of-time 编译的…...
递归算法学习——电话号码的字母组成,括号生成,组合
目录 一,电话号码的字母组合 1.题意 2.例子 3.题目接口 4.解题代码和思路 代码: 思路: 二,括号的生成 1.题意 2.例子 3.题目接口 四,解题代码和思路 1.先写代码: 2.思路 三,组合 …...
记录 JSONObject.parseObject json对象转换 对象字段为null
1.业务背景 使用websocket 接收消息都是String类型,没办法自定义实体类接收,所以接发都必须将json 转 对象 对象转 json。 这是我最开始的实体类,也就是转换的类型 package com.trinity.system.domain;import lombok.AllArgsConstructor; im…...
Android Native Code开发学习(二)JNI互相传参返回调用
Android Native Code开发学习(二) 本教程为native code学习笔记,希望能够帮到有需要的人 我的电脑系统为ubuntu 22.04,当然windows也是可以的,区别不大 一、native code介绍 native code就是在android项目中混合C或…...
Ubuntu 下安装Qt5.12.12无法输入中文解决方法
Ubuntu 下安装Qt5.12.12无法输入中文解决方法 一,环境: (1)VMware Workstation 15 Pro (2)Ubuntu 20.04 (3)Qt 5.12.12 64bits (4)Qt Creator 5.0.2 &#…...
微信小程序左上角home图标的解决方法之一 层级混乱导致的home图标显示的问题 自定义左上角左侧图标的返回路径
这个项目的编辑页在tabbar上 导致跳到tabbar得使用wx.switchTab 保存后返回原来的页面就出现了左上角的home图标 本来想通过自定义home图标的跳转路径来解决这个问题 没想到居然找不到相关内容 有清楚的朋友麻烦给我留个言不胜感激 那我写一下我的骚操作 app.js globalData: {…...
Kubernetes(K8s 1.28.x)部署---超详细
目录 一、基础环境配置(所有主机均要配置) 1、配置IP地址和主机名、hosts解析 2、关闭防火墙、禁用SELinux 3、安装常用软件 4、配置时间同步 5、禁用Swap分区 6、修改linux的内核参数 7、配置ipvs功能 二、容器环境操作 1、定制软件源 2、安…...
spring高级源码50讲-20-36(springMVC)
文章目录 WEB20) RequestMappingHandlerMapping 与 RequestMappingHandlerAdapter演示1 - DispatcherServlet 初始化代码参考 收获💡演示2 - 自定义参数与返回值处理器代码参考 收获💡 21) 参数解析器演示 - 常见参数解析器代码参考 收获💡 2…...
Leetcode Top 100 Liked Questions(序号141~189)
141. Linked List Cycle 题意:给你一个链表,判断链表有没有环 我的思路 两个指针,一个每次走两步,一个每次走一步,如果走两步的那个走到了NULL,那说明没有环,如果两个指针指向相等&…...
网络编程day3-FTP客户端项目
FTP协议 FTP 的独特的优势同时也是与其它客户服务器程序最大的不同点就在于它在两台通信的主机之间使用了两条 TCP 连接,一条是数据连接,用于数据传送;另一条是控制连接,用于传送控制信息(命令和响应)&…...
音频母带制作::AAMS V4.0 Crack
自动音频母带制作简介。 使用 AAMS V4 让您的音乐听起来很美妙! 作为从事音乐工作的音乐家,您在向公众发布材料时需要尽可能最好的声音,而为所有音频扬声器系统提供良好的商业声音是一项困难且耗时的任务。AI掌握的力量! 掌控您…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型(Vision-Language Models, VLMs),为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展,机器人仍难以胜任复杂的长时程任务(如家具装配),主要受限于人…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
【C++】纯虚函数类外可以写实现吗?
1. 答案 先说答案,可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
aardio 自动识别验证码输入
技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”,于是尝试整合图像识别与网页自动化技术,完成了这套模拟登录流程。核心思路是:截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...
