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,用于标记非紧急的状态更新。它允许组件在状态转换期间保持响应,通过将某些更新标记为"过渡"来推迟它们的渲染。 主要特…...
多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言:多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时,基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套:跨云网络构建数据…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
mac:大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何,是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试,是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
