Vue:自定义消息通知组件
一、效果描述
在JS中使用一个Message函数,弹出一个自定义的消息框。
效果体验:缓若江海凝清光
二、实现方式
1.新建一个消息组件
2.新建一个js文件,新建一个需要导出函数
3.在函数中新建一个Vue实例,并将消息组件挂载上去。
4.在需要使用到的地方导入
三、代码展示
1.消息组件messageOne
<template><div:class="yangshi == 0 ? 'message messageIn' : 'message messageOut'"v-show="meShow":style="{backgroundColor: tranColor,color: getComplementColor(tranColor),}"@click="handleColse"><div class="textBox">{{ message }}</div></div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";const props = defineProps({message: String,color: String,
});
const message = computed(() => props.message);
const emits = defineEmits(["click"]);
// 传输的颜色
const tranColor = computed(() => props.color);
const meShow = ref(true);
const yangshi = ref(0);
const changeShow = () => {setTimeout(() => {yangshi.value = 1;}, 2500);setTimeout(() => {meShow.value = false;}, 3000);
};
// 判断颜色格式
const isRgbColor = (color: string) => {// RGB格式的正则表达式const rgbRegex = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;const rgbaRegex =/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1}|0\.\d+)\)$/;// 检查RGB或RGBA格式if (rgbRegex.test(color) || rgbaRegex.test(color)) {return "rgb";}// 十六进制格式的正则表达式const hexRegex = /^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;// 检查十六进制格式if (hexRegex.test(color)) {return "hex";}// 如果都不是,返回falsereturn false;
};
// hex转rgb
const hexToRgb = (hex: string) => {// 去除字符串前面的 '#'hex = hex.replace("#", "");// 如果颜色代码只有三位(例如:#fff),则转换为六位(例如:#ffffff)if (hex.length === 3) {hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];}// 将十六进制颜色拆分为RGB三个分量const r = parseInt(hex.substring(0, 2), 16);const g = parseInt(hex.substring(2, 4), 16);const b = parseInt(hex.substring(4, 6), 16);// 返回RGB对象或字符串,根据需要调整// return {// r: r,// g: g,// b: b// };// 如果需要返回字符串格式,可以使用以下代码return `rgb(${r}, ${g}, ${b})`;
};
// 获取补色
const getComplementColor = (rgbString: string | undefined) => {if (!rgbString) return;let a = isRgbColor(rgbString);if (a == "hex") {rgbString = hexToRgb(rgbString);}// 正则表达式用于匹配rgb格式中的数值const rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;const result = rgbString.match(rgbRegex);// 如果没有匹配到有效的rgb格式,则返回错误if (!result) {throw new Error('Invalid RGB color format. Expected "rgb(R, G, B)" format.');}// 提取红色、绿色和蓝色的数值const r = parseInt(result[1], 10);const g = parseInt(result[2], 10);const b = parseInt(result[3], 10);// 计算补色的RGB值const complementR = 255 - r;const complementG = 255 - g;const complementB = 255 - b;// 格式化补色为"rgb(R, G, B)"字符串const complementColor = `rgb(${complementR}, ${complementG}, ${complementB})`;return complementColor;
};
const handleColse = () => {emits("click");
};
changeShow();
</script>
<style scoped>
.message {color: rgb(36, 21, 40);min-width: 200px;width: auto;height: 70px;background-color: rgba(17, 153, 20, 0.9);position: absolute;top: 50px;left: 50vw;transform: translateX(-50%);display: flex;justify-content: center;align-items: center;padding-left: 15px;padding-right: 15px;border-radius: 20px;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.messageIn {animation: mShow 0.5s;
}
.messageOut {animation: mNoShow 0.5s;animation-fill-mode: forwards;
}@keyframes mShow {0% {opacity: 0;}100% {opacity: 1;}
}
@keyframes mNoShow {0% {opacity: 1;}100% {opacity: 0;}
}
</style>
2.TS文件messageOne.ts
import { createApp } from "vue";
import MessageOne from "./messageOne.vue";
export function showMessageOne(message: string, onClick: any, color?: string) {const div = document.createElement("div");document.body.appendChild(div);// 自定义挂载的组件和传输的参数const app = createApp(MessageOne, {message,color,onClick() {onClick(() => {app.unmount();div.remove();});},});app.mount(div);
}
3.使用
<script setup lang="ts">
import { showMessageOne } from "../../components/messageOne";
const ClickButton = () => {showMessageOne("消息通知",(close: any) => {close();},'#000');
};
</script>
相关文章:
Vue:自定义消息通知组件
一、效果描述 在JS中使用一个Message函数,弹出一个自定义的消息框。 效果体验:缓若江海凝清光 二、实现方式 1.新建一个消息组件 2.新建一个js文件,新建一个需要导出函数 3.在函数中新建一个Vue实例,并将消息组件挂载上去。…...
2023 收入最高的十大编程语言
本期共享的是 —— 地球上目前已知超过 200 种可用的编程语言,了解哪些语言在 2023 为开发者提供更高的薪水至关重要。 过去一年里,我分析了来自地球各地超过 1000 万个开发职位空缺,辅助我们了解市场,以及人气最高和收入最高的语…...
Github 2024-03-11 开源项目周报 Top15
根据Github Trendings的统计,本周(2024-03-11统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目4TypeScript项目3Jupyter Notebook项目3C#项目1HTML项目1CSS项目1Dart项目1Lua项目1Shell项目1Rust…...
【DAY10 软考中级备考笔记】数据结构 图
数据结构 图 3月11日 – 天气:晴 晚上无线网络突然不能用了,花费好久弄这个,耽误了一些时间 1. 图的定义 这里需要注意完全图的定义,以及完全图的边数 这里需要注意连通图和连通分量的概念。 2. 图的存储结构 图有两种存储结构&a…...
java-ssm-jsp基于java的餐厅点餐系统的设计与实现
java-ssm-jsp基于java的餐厅点餐系统的设计与实现 获取源码——》公主号:计算机专业毕设大全...
蓝桥杯(1):python排序
1 基础 1.1 输出 1.1.1 去掉输出的空格 print("Hello","World",123,sep"") print("hello",world,123,sep) print(hello,world,123) #输出结果 #HelloWorld123 #helloworld123 #hello world 123 1.1.2 以不同的方式结尾 print(&quo…...
SpringMVC请求、响应和拦截器的使用
SpringMVC请求 RequestMapping注解 RequestMapping注解的作用是建立请求URL和处理方法之间的对应关系 RequestMapping注解可以作用在方法和类上 1. 作用在类上:第一级的访问目录 2. 作用在方法上:第二级的访问目录 3. 细节:路径可以不编写…...
基于springboot+layui仓库管理系统设计和实现
基于 java springbootlayui仓库管理系统设计和实现 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取…...
【开源-土拨鼠充电系统】鸿蒙 HarmonyOS 4.0+微信小程序+云平台
本人自己开发的开源项目:土拨鼠充电系统 ✍GitHub开源项目地址👉:https://github.com/cheinlu/groundhog-charging-system ✍Gitee开源项目地址👉:https://gitee.com/cheinlu/groundhog-charging-system ✨踩坑不易&am…...
[抽象]工厂模式([Abstract] Factory)——创建型模式
[抽象]工厂模式——创建型模式 什么是抽象工厂? 抽象工厂模式是一种创建型设计模式,让你能够保证在客户端程序中创建一系列有依赖的对象组时,无需关心这些对象的类型。 具体来说: 对象的创建与使用分离: 抽象工厂模…...
QT网络编程之实现UDP广播发送和接收
推荐一个不错的人工智能学习网站,通俗易懂,内容全面,作为入门科普和学习提升都不错,分享一下给大家:前言https://www.captainbed.cn/ai 一.UDP通信 1.QT中实现UDP通信主要用到了以下类:QUdpSocket、QHost…...
SSL VPN基础原理
目录 SSL ---安全传输协议(安全套接层)---TLS ----传输层安全协议 SSL的工作原理 SSL会话建立的过程 编辑 数据传输过程中的封装示意图 无客户端认证的过程 有客户端认证的过程 SSL VPN的核心技术---虚拟网关技术 服务器验证的点: 资源…...
深入理解FTP协议:文件传输的桥梁
深入理解FTP协议:文件传输的桥梁 在数字化时代,文件传输协议(FTP)是互联网上进行文件交换的重要手段。FTP允许用户在不同的计算机之间传输文件,无论是上传还是下载,都提供了一种稳定且高效的方式。本文将深…...
数字化转型导师坚鹏:金融机构数字化运营
金融机构数字化运营 课程背景: 很多金融机构存在以下问题: 不清楚数字化运营对金融机构发展有什么影响? 不知道如何提升金融机构数字化运营能力? 不知道金融机构如何开展数字化运营工作? 课程特色:…...
一、C#冒泡排序算法
一、C#冒泡排序算法 简介 冒泡排序算法是一种基础的排序算法,它的实现原理比较简单。核心思想是通过相邻元素的比较和交换来将最大(或最小)的元素逐步"冒泡"到数列的末尾。 实现原理 冒泡排序是一种简单的排序算法,其…...
docker部署mysql5
1. 进入面板 2. 新建挂载文件夹 新建三个文件夹: mkdir -p /docker/mysql5/config && mkdir -p /docker/mysql5/data && mkdir -p /docker/mysql5/logsconfig:存放mysql配置data:存放mysql数据logs:存放mysql记录日志 3.…...
Github 2024-03-15 Java开源项目日报 Top10
根据Github Trendings的统计,今日(2024-03-15统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Java项目9非开发语言项目1TypeScript项目1《Hello 算法》:动画图解、一键运行的数据结构与算法教程 创建周期:476 天协议类型:OtherStar数量…...
SQLiteC/C++接口详细介绍之sqlite3类(六)
快速前往文章列表:SQLite—系列文章目录 上一篇:SQLiteC/C接口详细介绍之sqlite3类(五) 下一篇:SQLiteC/C接口详细介绍之sqlite3类(七) 19. sqlite3_changes与sqlite3_changes64 是SQLite中用…...
编码技巧:多条件判断拼接字符串
在写代码业务逻辑的时候,有时候需求稍微变化一下都让代码变的很麻烦,如果只在现有代码基础上硬改,可能会让可读性降低,本文通过一个例子来演示字符串拼接的变化。 一开始的业务逻辑比较简单,是固定条件加一个需要判断…...
气压计LPS25HB开发(1)----轮询获取气压计数据
气压计LPS25HB开发----1.轮询获取气压计数据 概述视频教学样品申请源码下载产品特性通信模式速率生成STM32CUBEMX串口配置IIC配置SA0地址设置串口重定向参考程序SA0设置模块地址获取ID复位操作BDU设置设置速率轮询读取数据演示 概述 本文将介绍如何使用 LPS25HB 传感器来读取数…...
从零开始将Taotoken接入静态网站实现动态AI交互
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 从零开始将Taotoken接入静态网站实现动态AI交互 1. 场景与核心思路 对于使用 Hugo、Hexo、VuePress 等工具生成的静态网站&#x…...
RHEL 9保姆级教程:手把手教你用阿里云镜像替换官方yum源(附完整命令)
RHEL 9极速配置指南:阿里云镜像源一键切换实战刚拿到RHEL 9服务器时,最令人抓狂的莫过于看着进度条像蜗牛一样缓慢爬行。官方源的速度不仅影响工作效率,更可能让紧急部署变成一场噩梦。本文将用最直白的操作语言,带你三步完成阿里…...
别再死记硬背MFCC公式了!用Python手把手带你复现FBank/MFCC特征提取全流程
从零实现语音特征提取:用Python拆解FBank与MFCC的数学之美语音识别技术正悄然改变我们与机器交互的方式,但很少有人真正理解声音是如何被转化为机器可读的数字特征的。本文将带您深入音频信号处理的数学世界,通过Python代码亲手实现从原始波形…...
智慧树刷课插件:3分钟搞定网课,解放你的宝贵时间![特殊字符]
智慧树刷课插件:3分钟搞定网课,解放你的宝贵时间!🚀 【免费下载链接】zhihuishu 智慧树刷课插件,自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 还在为智慧树平台的…...
iKuai系统安装踩坑实录:从‘找不到启动项’到成功引导,我的EFI/U盘避坑全记录
iKuai系统安装避坑指南:从EFI配置到BIOS设置的深度解析第一次尝试在x86设备上安装iKuai软路由系统时,我遇到了一个令人抓狂的问题——制作好的U盘启动盘竟然无法被电脑识别。屏幕上冷冰冰的"No bootable device found"提示,让原本简…...
从Python课设到CTF利器:JWT_GUI工具开发复盘与使用避坑全指南
从Python课设到CTF利器:JWT_GUI工具开发复盘与使用避坑全指南在CTF竞赛和渗透测试中,JWT(JSON Web Token)的安全问题一直是个高频考点。作为一个原本只是应付Python课程设计的工具,JWT_GUI却意外成为了解决这类问题的利…...
Outlook CVE-2023-36895:MAPI与HTML渲染器间的类型混淆漏洞
1. 这个漏洞不是“点开邮件就中招”,但比你想象的更危险CVE-2023-36895,微软在2023年8月补丁星期二发布的那个Outlook远程代码执行漏洞,标题里写着“远程代码执行”,很多人第一反应是:“完了,我昨天刚看了封…...
机器学习增强无导数优化:Sobolev学习与代理模型实践
1. 项目概述与核心思路在工程优化、材料设计乃至金融建模中,我们常常会遇到一类“黑箱”问题:你有一个复杂的仿真程序或物理实验,输入一组参数,它能吐出一个结果(比如性能指标、成本或误差),但你…...
81、CAN总线基础回顾:从诞生到经典架构
CAN总线基础回顾:从诞生到经典架构 去年冬天,我在调试一台农用机械的ECU通信时,遇到一个诡异现象:发动机转速数据偶尔跳变到65535,仪表盘直接显示“—”。用示波器抓波形,CAN_H和CAN_L的差分信号在总线空闲时居然有0.3V的直流偏置。排查了三天,最后发现是终端电阻焊盘虚…...
dos系统时代
1、蒂姆帕特森 是 “洁净室”方法吗 还是IBM 一、帕特森开发86-DOS:不是“洁净室”,而是“直接参考” 帕特森在1980年开发86-DOS(最初叫QDOS)时,并没有采用“洁净室”这种规避侵权的合法逆向工程方法。 实际上&…...
