Vue3初学之Element Plus Dialog对话框,Message组件,MessageBox组件
- Dialog的使用:
控制弹窗的显示和隐藏
<template><div><el-button @click="dialogVisible = true">打开弹窗</el-button><el-dialogv-model="dialogVisible"title="提示"width="30%":before-close="handleClose"><span>这是一段信息</span><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="dialogVisible = false">确定</el-button></span></template></el-dialog></div>
</template><script setup>
import { ref } from 'vue';const dialogVisible = ref(false);const handleClose = (done) => {dialogVisible.value = false;
};
</script>


增加内容尾部


弹窗打开时仍然可以与背景页面交互,可以设置 modal 属性为 false

2.Message组件
ElMessage 组件可以实现全局消息提示功能
<template><el-button @click="openSuccess">成功消息</el-button><el-button @click="openWarning">警告消息</el-button><el-button @click="openInfo">普通消息</el-button><el-button @click="openError">错误消息</el-button>
</template><script setup>
import { ElMessage } from 'element-plus';
const openSuccess = () => {ElMessage.success('这是一条成功消息');
};
const openWarning = () => {ElMessage.warning('这是一条警告消息');
};
const openInfo = () => {ElMessage('这是一条普通消息');
};
const openError = () => {ElMessage.error('这是一条错误消息');
};
</script>


通过设置 dangerouslyUseHTMLString 属性为 true,可以将消息内容作为 HTML 片段处理

全局方法
如果 Element Plus 是全局引入的,ElMessage 会自动挂载到app.config.globalProperties,可以在 Vue 实例中直接使用

3. MesageBox组件
使用 confirm 显示确认框
<template><el-button @click="openConfirm">打开 Confirm</el-button>
</template><script setup>
import { ElMessageBox } from 'element-plus';const openConfirm = () => {ElMessageBox.confirm('此操作将永久删除该文件,是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {console.log('确认');}).catch(() => {console.log('取消');});
};
</script>

使用 prompt 显示输入框
<template><el-button @click="openPrompt">打开 Prompt</el-button>
</template><script setup>
import { ElMessageBox } from 'element-plus';const openPrompt = () => {ElMessageBox.prompt('请输入你的邮箱', '提示', {confirmButtonText: '确定',cancelButtonText: '取消'}).then(({ value }) => {console.log('用户输入的邮箱:', value);}).catch(() => {console.log('取消输入');});
};
</script>

全局方法
如果 Element Plus 是全局引入的,ElMessageBox 的方法会自动挂载到 app.config.globalProperties,可以在 Vue 实例中直接使用
this.$alert('这是一段内容', '标题');
this.$confirm('此操作将永久删除该文件,是否继续?', '提示');
this.$prompt('请输入你的邮箱', '提示');
相关文章:
Vue3初学之Element Plus Dialog对话框,Message组件,MessageBox组件
Dialog的使用: 控制弹窗的显示和隐藏 <template><div><el-button click"dialogVisible true">打开弹窗</el-button><el-dialogv-model"dialogVisible"title"提示"width"30%":before-close&qu…...
基于Python机器学习的双色球数据分析与预测
python统计分析2003-2024年所有的中奖记录,通过人工智能机器学习预测双色球,个人意见,仅供参考. 声明:双色球具有随机性,任何工具无法预测。本文章仅作为技术交流,提供学习参考。本文所涉及的代码均为python之机器学习的代码。双色球为公益事…...
微软Win10 RP 19045.5435(KB5050081)预览版发布!
系统之家1月20日最新报道,微软面向Release Preview频道的Windows Insider项目成员,发布了适用于Windows10 22H2版本的KB5050081更新,更新后系统版本号将升至19045.5435。本次更新增加了对GB18030-2022标准的支持,同时新版日历将为…...
使用 Parcel 和 NPM 脚本进行打包
使用 Parcel 和 NPM 脚本进行打包 Parcel Parcel 是一个零配置的网页应用程序打包工具,主要用于快速构建现代 JavaScript 应用。 我们可以使用npm直接安装它 npm install --save-dev parcel //这将把 Parcel 添加到 devDependencies 中,表明它是一个…...
HTML<center>标签
HTML5不支持。 <center>标签在HTML4中用于使文本居中对齐。 用什么来代替呢? 例子 居中对齐文本(使用 CSS): <html> <head> <style> h1 {text-align: center;} p {text-align: center;} div {text-a…...
LatentSync本地部署教程:基于音频精准生成唇形高度同步视频
LatentSync 是字节跳动联合北京交通大学推出的一个端到端的唇形同步框架,以下是对其的详细介绍: 一、技术基础 LatentSync 基于音频条件的潜在扩散模型,无需任何中间的 3D 表示或 2D 特征点。它利用了 Stable Diffusion 的强大生成能力&…...
ES使用笔记,聚合分组后再分页,探索性能优化问题
之前分享过一篇文档,也是关于聚合分组后再分页的具体实现,当时只想着怎么实现,没有去主要探索ES性能优化的问题, 这篇我会换一种方式,重新实现这个聚合分组后再分页的操作,并且指出能优化性能点,可能我们再使用的时候,并没有注意过的点,希望对你有帮助!大佬的话,请忽略! 上源码…...
VUE3 vite下的axios跨域
在使用 Vite 开发时,如果你的前端项目需要请求后端 API,且后端和前端不在同一个域上,可能会遇到跨域问题。跨域是指浏览器出于安全考虑,阻止了前端网页向不同源(域名、协议、端口)发送请求。 解决跨域问题…...
Mac下安装ADB环境的三种方式
参考网址: Mac下安装ADB环境的三种方式-百度开发者中心 ADB,即Android Debug Bridge,是Android开发过程中不可或缺的工具。通过ADB,开发者可以在计算机上管理设备或模拟器上的应用,提供了丰富的调试功能。然而&#…...
在Vue中,<img> 标签的 src 值
1. 直接指定 src 的值(适用于网络图片) 如果你使用的是网络图片(即图片的URL是完整的HTTP或HTTPS链接),可以直接指定 src 的值: vue 复制 <template><div><img src"https://exampl…...
Kotlin基础知识学习(三)
函数使用 基本用法 函数声明变化 如果函数是公开的,则public关键字可以省略。用fun关键字表示函数的定义。如果函数没有返回值可以不用声明。如果函数表示重载,直接在fun同一行用override修饰。函数参数格式是变量名:变量类型。函数参数允…...
渗透测试之XEE[外部实体注入]漏洞 原理 攻击手法 xml语言结构 防御手法
目录 原理 XML语言解释 什么是xml语言: 以PHP举例xml外部实体注入 XML语言结构 面试题目 如何寻找xxe漏洞 XEE漏洞修复域防御 提高版本 代码修复 php java python 手动黑名单过滤(不推荐) 一篇文章带你深入理解漏洞之 XXE 漏洞 - 先知社区 原理 XXE&…...
店铺营业状态设置(day05)
Redis入门 Redis简介 Redis 是一个基于内存的 key-value 结构数据库。Redis 是互联网技术领域使用最为广泛的存储中间件。 Redis是一个基于内存的 key-value 结构数据库。 主要特点: 1、基于内存存储,读写性能高 2、适合存储热点数据(热点…...
游戏引擎学习第84天
仓库:https://gitee.com/mrxiao_com/2d_game_2 我们正在试图弄清楚如何完成我们的世界构建 上周做了一些偏离计划的工作,开发了一个小型的背景位图合成工具,这个工具做得还不错,虽然是临时拼凑的,但验证了背景构建的思路。这个过…...
快手SDK接入错误处理经验总结(WebGL方案)
1、打包时提示Assets\WebGLTemplates\ks路径下未找到Index.html文件错误 处理方法:直接使用Unity默认模板下的Index.html文件即可 文件所在路径:Unity安装路径\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates\Default 参考图&a…...
C语言 for 循环:解谜数学,玩转生活!
放在最前面的 🎈 🎈 我的CSDN主页:OTWOL的主页,欢迎!!!👋🏼👋🏼 🎉🎉我的C语言初阶合集:C语言初阶合集,希望能…...
Node.js 与 JavaScript 是什么关系
JavaScript 是一种编程语言,而 Node.js 是 JavaScript 的一个运行环境,它们在不同的环境中使用,具有一些共同的语言基础,但也有各自独特的 API 和模块,共同推动着 JavaScript 在前后端开发中的广泛应用。 一、基础语言…...
Java 大视界 -- Java 大数据性能监控与调优:全链路性能分析与优化(十五)
💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
深入Spring Boot:自定义Starter开发与实践
引言 Spring Boot通过其强大的自动配置机制和丰富的Starter模块,极大地简化了Spring应用的开发过程。Starter模块封装了一组相关的依赖和配置,使得开发者可以通过简单的依赖引入,快速启用特定的功能。然而,除了使用Spring Boot提…...
React 中hooks之useTransition使用总结
目录 概述基本用法使用场景最佳实践注意事项 概述 什么是 useTransition? useTransition 是 React 18 引入的新 Hook,用于标记非紧急的状态更新。它允许组件在状态转换期间保持响应,通过将某些更新标记为"过渡"来推迟它们的渲染。 主要特…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...
