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

Vue开发者必备!手把手教你实现类似Element Plus的全局提示组件!

前言

在Web开发中,用户体验至关重要。有效的信息提示和错误消息对于确保用户更好地理解和操作至关重要。在这个背景下,全局弹框提示组件成为了一个非常有用的工具。Vue.js,作为当前最受欢迎的前端框架之一,为创建灵活、可复用的弹框组件提供了强大的支持。本文将介绍一个简单而强大的全局弹框提示组件,并探讨它是如何实现的。

组件示例

​​在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码展示

Message.vue

首先,让我们看看这个全局弹框提示组件的Vue文件。

// Message.vue
<template><div class="message" v-if="visible"><img :src="imgSrc" /><span class="text">{{ text }}</span></div>
</template>
<script setup lang="ts">import { onMounted, PropType, ref } from 'vue';const props = defineProps({text: {type: String,default: '',},type: {type: String as PropType<'warn' | 'error' | 'success'>,default: 'warn',},});const visible = ref(false);const imgSrc = ref('@/assets/img/warn.svg');onMounted(() => {switch (props.type) {case 'warn':imgSrc.value = require('@/assets/img/warn.svg');break;case 'error':imgSrc.value = require('@/assets/img/error.svg');break;case 'success':imgSrc.value = require('@/assets/img/success.svg');break;default:break;}console.log(imgSrc.value);visible.value = true;});
</script>
<style>.message {position: fixed;z-index: 88888;top: 0;color: black;left: 50%;height: 40px;line-height: 40px;top: 80px;transform: translate(-50%);padding: 12px;background-color: white;border: 1px solid rgba(0, 0, 0, 0.1);display: flex;align-items: center;animation: downed 100ms ease;border-radius: 4px;box-sizing: border-box;}@keyframes downed {0% {top: 60px;}100% {top: 80px;}}.text {margin-left: 5px;max-width: 400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
</style>

整个组件的作用是,根据传入的 text 和 type 显示一个带有图片和文本的弹框。其中 type 有三个可能的值:warn、error 和 success,分别表示警告、错误和成功。根据 type 的值,弹框的图片和文本也会有所不同。组件使用了 Vue.js 的响应式系统,使 visible、text 和 imgSrc 成为响应式引用,从而方便地与父组件共享数据。

config.ts

有两种配置方式,根据个人爱好选择即可

第一种
// 实现使用函数调用message组件的逻辑
//   引入 创建虚拟节点 和渲染方法
import { createVNode, render } from 'vue';
// 引入信息提示组件
import message from './Message.vue';// 准备dom容器
const div = document.createElement('div');
// 添加类名
div.setAttribute('class', 'message-container');
// 添加到body上
document.body.appendChild(div);// 定时器标识
let timer = null;export default ({ type, text }) => {const divs: any = document.getElementsByClassName('message');if (divs.length > 0) {clearTimeout(timer);render(null, div);}// 创建虚拟节点   第一个参数为要创建的虚拟节点  第二个参数为props的参数const vNode = createVNode(message, { type, text });// 把虚拟节点渲染DOM容器中render(vNode, div);// 开启定时器,移出DOM容器内容clearTimeout(timer);timer = setTimeout(() => {render(null, div);}, 3000);
};第二种
// 实现使用函数调用message组件的逻辑
//   引入 创建虚拟节点 和渲染方法
import { createVNode, render } from 'vue';
// 引入信息提示组件
import message from './Message.vue';// 准备dom容器
const div = document.createElement('div');
// 添加类名
div.setAttribute('class', 'message-container');
// 添加到body上
document.body.appendChild(div);// 定时器标识
let timer = null;function sendInfo(type, text) {const divs: any = document.getElementsByClassName('message');if (divs.length > 0) {clearTimeout(timer);render(null, div);}// 创建虚拟节点   第一个参数为要创建的虚拟节点  第二个参数为props的参数const vNode = createVNode(message, { type, text });// 把虚拟节点渲染DOM容器中render(vNode, div);// 开启定时器,移出DOM容器内容clearTimeout(timer);timer = setTimeout(() => {render(null, div);}, 3000);
}
export default {success(text) {sendInfo('success', text);},warn(text) {sendInfo('warn', text);},error(text) {sendInfo('error', text);},
};

第一种方法,我们创建了一个函数message,该函数接受type和text两个参数。我们使用createVNode和render函数从创建一个Message组件的虚拟节点,并将其渲染到div元素中。我们还使用了一个定时器来在3秒后移除弹框。

第二种最大的改变是省去了传入的type,用户调用时直接传入text即可。

使用

最后,我们可以通过调用message函数来显示弹框。例如:

第一种
message({ type: 'error', text: '测试弹框fun' });第二种
message.error('测试弹框fun')

图片

error.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="red" d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zM11.4 10l2.83-2.83l-1.41-1.41L10 8.59L7.17 5.76L5.76 7.17L8.59 10l-2.83 2.83l1.41 1.41L10 11.41l2.83 2.83l1.41-1.41L11.41 10z"/></svg>

warn.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="#faad14" d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zM9 5v6h2V5H9zm0 8v2h2v-2H9z"/></svg>

success.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#52c41a" fill-rule="evenodd" d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4S4 12.954 4 24s8.954 20 20 20Zm10.742-26.33a1 1 0 1 0-1.483-1.34L21.28 29.567l-6.59-6.291a1 1 0 0 0-1.382 1.446l7.334 7l.743.71l.689-.762l12.667-14Z" clip-rule="evenodd"/></svg>

总结

虽然这个组件的实现原理很简单,但是它在用户体验和功能上却非常强大。它使用了Vue.js的响应式系统和动画效果,使得弹框在显示和隐藏时都能给用户带来良好的视觉体验。

完整附件:点此下载

相关文章:

Vue开发者必备!手把手教你实现类似Element Plus的全局提示组件!

前言 在Web开发中&#xff0c;用户体验至关重要。有效的信息提示和错误消息对于确保用户更好地理解和操作至关重要。在这个背景下&#xff0c;全局弹框提示组件成为了一个非常有用的工具。Vue.js&#xff0c;作为当前最受欢迎的前端框架之一&#xff0c;为创建灵活、可复用的弹…...

大数据 - Hadoop系列《三》- HDFS(分布式文件系统)概述

&#x1f436;5.1 hdfs的概念 HDFS分布式文件系统,全称为:Hadoop Distributed File System。 它是一个文件系统&#xff0c;用于存储文件&#xff0c;通过目录树来定位文件&#xff1b;其次&#xff0c;它是分布式的&#xff0c;由很多服务器联合起来实现其功能&#xff0c;集…...

Golang标准库sync的使用

Go语言作为现代编程语言&#xff0c;其并发编程的优势是有目共睹的。在实际编程中&#xff0c;我们常常需要保证多个goroutine之间的同步&#xff0c;这就需要使用到Go语言的sync标准库。sync库提供了基本的同步原语&#xff0c;例如互斥锁&#xff08;Mutex&#xff09;和等待…...

判断两张图片是否完全一致

判断两张图片是否为完全相同的图片 批量判断尺寸 大小 图像展示内容体是否完全一致的图片 import os import hashlib from PIL import Imagedef check_img_repeat(directory):"""批量对图片进行重复性校验是检查一组图像中是否有相同或几乎相同的图像副本。一…...

2024洗地机哪家强?口碑洗地机推荐

现如今&#xff0c;智能家电在人们生活中变得越来越受欢迎&#xff0c;例如智能洗地机的出现&#xff0c;不仅省时省力&#xff0c;还实现了家务清洁的自由。在家庭中&#xff0c;地面清洁一直是一个令人头疼的问题&#xff0c;各种智能家居品牌通过开发各种智能家电产品来解决…...

k8s的资源管理

命令行: kubectl命令行工具优点: 90%以上的场景都可以满足 对资源的增&#xff0c;删&#xff0c;查比较方便&#xff0c;对改不是很友好缺点:命令比较冗长&#xff0c;复杂难记 声明方式&#xff1a;k8s当中的yaml文件实现资源管理----声明式GUI:图形化工具的管理。 查看k8s的…...

docker应用部署(部署MySql,部署Tomcat,部署Nginx,部署Redis)

Docker 应用部署 一、部署MySQL 搜索mysql镜像 docker search mysql拉取mysql镜像 docker pull mysql:5.6创建容器&#xff0c;设置端口映射、目录映射 # 在/root目录下创建mysql目录用于存储mysql数据信息 mkdir ~/mysql cd ~/mysqldocker run -id \ -p 3307:3306 \ --na…...

非常好用的ocr图片文字识别技术,识别图片中的文字

目录 一.配置环境 二.应用 2.1常见图片识别 2.2排版简单的印刷体截图图片识别 2.3竖排文字识别 2.4英文识别 2.5繁体中文识别 2.6单行文字的图片识别 三.参考 一.配置环境 pip3 install cnocr -i https://pypi.tuna.tsinghua.edu.cn/simple pip3 install onnxruntime…...

20231227在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单后摄像头ov13850

20231227在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单后摄像头ov13850 2023/12/27 18:40 1、简略步骤&#xff1a; rootrootrootroot-X99-Turbo:~/3TB$ cat Android11.0.tar.bz2.a* > Android11.0.tar.bz2 rootrootrootroot-X99-Turbo:~/3TB$ tar jxvf Androi…...

Unity中Shader裁剪空间推导(透视相机到裁剪空间的转化矩阵)

文章目录 前言一、简单看一下 观察空间—>裁剪空间—>屏幕空间 的转化1、观察空间&#xff08;右手坐标系、透视相机&#xff09;2、裁剪空间&#xff08;左手坐标系、且转化为了齐次坐标&#xff09;3、屏幕空间&#xff08;把裁剪坐标归一化设置&#xff09;4、从观察空…...

企业签名分发对移动应用开发者有什么影响

企业签名分发是移动应用开发者在应用程序发布前测试、内部分发和特定的受众群体分发等方面比较常用的一种工具。那对于应用商城分发有啥区别&#xff0c;下面简单的探讨一下。 独立分发能力 通过企业签名分发开发者可以自己决定应用程序的发布时间和方式&#xff0c;不用受应用…...

3D游戏角色建模纹理贴图处理

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 在本文中&#xff0c;我们将介绍 3D 纹理的基础知识&#xff0c;并讨…...

【C++ 单例模式】

正确的析构 静态实例和回收类 SingletonMode.cpp #include <iostream> #include <pthread.h>class Singleton {private:Singleton(){std::cout << "构造" << std::endl;};~Singleton(){std::cout << "析构" << std::…...

React16源码: ConcurrentMode的使用及源码实现

ConcurrentMode 1 ) 概述 ConcurrentMode 是 React 16 出来的一个最令人振奋的功能在2018年年初是 Async Mode&#xff0c;在发布了16.6之后&#xff0c;名字进行了更新然后改成了 ConcurrentMode&#xff0c;中间的API有一个过渡的版本&#xff0c;后续会提到它其实是 React…...

SQL性能优化-索引

1.性能下降sql慢执行时间长等待时间长常见原因 1&#xff09;索引失效 索引分为单索、复合索引。 四种创建索引方式 create index index_name on user (name); create index index_name_2 on user(id,name,email); 2&#xff09;查询语句较烂 3&#xff09;关联查询太多join&a…...

Ubuntu本地快速搭建web小游戏网站,公网用户远程访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;…...

easyrecovery 2024最新免费密钥分享 实用数据恢复软件分享

在日常使用电脑时&#xff0c;我们经常会遇到误删文件的情况&#xff0c;若文件还未被彻底删除&#xff0c;我们还可以通过电脑中的回收站将其恢复&#xff0c;但若是回收站都被清空的话&#xff0c;想要恢复文件就变得比较困难了&#xff0c;而EasyRecovery可以很好的帮助我们…...

2.4信道复用技术

目录 2.4信道复用技术2.4.1频分复用、时分复用和统计时分复用频分复用FDM&#xff08;Frequency Division Multiplexing&#xff09;时分复用TDM&#xff08;Time Division Multiplexing&#xff09;统计时分复用STDM&#xff08;Statistic TDM&#xff09; 2.4.2波分复用2.4.3…...

JVM篇:JVM的简介

JVM简介 JVM全称为Java Virtual Machine&#xff0c;翻译过来就是java虚拟机&#xff0c;Java程序&#xff08;Java二进制字节码&#xff09;的运行环境 JVM的优点&#xff1a; Java最大的一个优点是&#xff0c;一次编写&#xff0c;到处运行。之所以能够实现这个功能就是依…...

uniapp 输入手机号并且正则校验

1.<input input“onInput” :value“phoneNum” type“number” maxlength“11”/> 3. method里面写 onInput(e){ this.phoneNum e.detail.value }, 4.调用接口时候校验正则 if (!/^1[3456789]\d{9}$/.test(this.phoneNum)) {uni.showToast({title: 请输入正确的手机号…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

Python学习(8) ----- Python的类与对象

Python 中的类&#xff08;Class&#xff09;与对象&#xff08;Object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心。我们可以通过“类是模板&#xff0c;对象是实例”来理解它们的关系。 &#x1f9f1; 一句话理解&#xff1a; 类就像“图纸”&#xff0c;对…...