Vue3初学之Element Plus Dialog对话框,Message组件,MessageBox组件

  1. 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('请输入你的邮箱', '提示');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/893448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自然语言处理(NLP)-总览图学习

文章目录 自然语言处理&#xff08;NLP&#xff09;-总览图学习1.一张总览图的学习1. 语音学&#xff08;Phonology&#xff09;2. 形态学&#xff08;Morphology&#xff09;3. 句法学&#xff08;Syntax&#xff09;4. 语义学&#xff08;Semantics&#xff09;5. 推理&#…

机器学习 vs 深度学习

目录 一、机器学习 1、实现原理 2、实施方法 二、深度学习 1、与机器学习的联系与区别 2、神经网络的历史发展 3、神经网络的基本概念 一、机器学习 1、实现原理 训练&#xff08;归纳&#xff09;和预测&#xff08;演绎&#xff09; 归纳: 从具体案例中抽象一般规律…

谈谈RTMP|RTSP播放器视频view垂直|水平反转和旋转设计

技术背景 我们在做RTMP|RTSP播放器的时候&#xff0c;有这样的技术诉求&#xff0c;有的摄像头出来的数据是有角度偏差的&#xff0c;比如“装倒了”&#xff0c;或者&#xff0c;图像存在上下或者左右反转&#xff0c;这时候&#xff0c;就需要播放器能做响应的处理&#xff…

论文阅读--Qwen22.5技术报告

Qwen2 1 引言 所有模型都是在超过7 trillion token&#xff08;7万亿&#xff09;的高质量、大规模数据集上预训练的 2 Tokenizer & Model 2.1 Tokenizer 沿用Qwen&#xff08;Bai等人&#xff0c;2023a&#xff09;的做法&#xff0c;我们采用了基于字节级字节对编码…

FPGA中场战事

2023年10月3日,英特尔宣布由桑德拉里维拉(Sandra Rivera)担任“分拆”后独立运营的可编程事业部首席执行官。 从数据中心和人工智能(DCAI)部门总经理,转身为执掌该业务的CEO,对她取得像AMD掌门人苏姿丰博士类似的成功,无疑抱以厚望。 十年前,英特尔花费167亿美元真金白银…

【jmeter】下载及使用教程【mac】

1.安装java 打开 Java 官方下载网站https://www.oracle.com/java/technologies/downloads/选择您想要下载的 Java 版本&#xff0c;下载以 .dmg 结尾的安装包&#xff0c;注意 JMeter 需要 Java 8下载后打开安装包点击“安装”按钮即可 2.下载jmeter 打开 Apache JMeter 官方…

postman请求参数化

postman界面介绍 一、使用环境变量(Environment Variables)进行参数化 1、在请求中使用环境变量 在请求的url、请求头(Headers)、请求体(Body)等部分都可以使用环境变量。 URL 部分示例 点击 Postman 界面右上角的 “眼睛” 图标(Environment Quick Look)打开环境管理…

2024年博客之星年度评选|第一步——创作影响力评审入围Top300名单 | 博客之星陪跑指南

2024年博客之星年度评选&#xff5c;第一步——创作影响力评审入围Top300名单 | 博客之星陪跑指南 2024年博客之星年度评选正在如火如荼地进行中&#xff01;作为博客圈最具影响力的评选活动之一&#xff0c;今年的评选吸引了众多优秀博主的参与。现在&#xff0c;距离Top300入…

阻燃高温尼龙行业:市场潜力巨大,引领材料科学新变革

在当今快速发展的工业和材料科学领域&#xff0c;阻燃高温尼龙作为一种兼具卓越防火性能和高温稳定性的新型材料&#xff0c;正逐步成为多个领域的首选材料。随着全球对安全性能要求的提高和技术的不断创新&#xff0c;阻燃高温尼龙市场呈现出快速增长的态势&#xff0c;展现出…

HTML中的`<!DOCTYPE html>`是什么意思?

诸神缄默不语-个人CSDN博文目录 在学习HTML时&#xff0c;我们经常会看到HTML文档的开头出现<!DOCTYPE html>&#xff0c;它是HTML文件的第一行。很多初学者可能会疑惑&#xff0c;为什么需要这行代码&#xff1f;它到底有什么作用呢&#xff1f;在这篇文章中&#xff0…

系统学习算法:专题五 位运算

位运算总结&#xff08;默认学过位操作符的知识&#xff09;&#xff1a; 1. 这六种就是常见的位运算符&#xff0c;无进位相加就是在二进制中&#xff0c;两个数的某一位1和1可以进位&#xff0c;但是异或就不进位&#xff0c;相加后为0&#xff0c;跟相同为0&#xff0c;相异…

JVM参数-NativeMemoryTracking

实际开发场景中应该有发现Java应用程序会消耗比设置-Xms和-Xmx更多的内存&#xff0c;究其原因其实是因为JVM中除了大家熟知的堆内存外,还有所谓的非堆内存&#xff08;Non-Heap Memory&#xff09;,详细来看,非堆内存包括方法区和Java虚拟机内部做处理或优化所需的内存。 从图…

【PVE】Proxmox VE8.0+创建LXC容器安装docker

为了不影响PVE宿主机&#xff0c;通常使用套娃的形式安装Docker容器&#xff0c;再安装相关docker应用。首先在CT模板中创建 Linux 容器&#xff0c;推荐使用Debian。开启ssh登录&#xff0c;修改debian配置&#xff0c;安装docker 一、创建 LXC 容器 1、CT模板下载 点击“模…

代码随想录算法训练营day34

代码随想录算法训练营 —day34 文章目录 代码随想录算法训练营前言一、62.不同路径动态规划动态规划空间优化 二、63. 不同路径 II动态规划动态规划优化空间版 三、343. 整数拆分动态规划贪心算法 96.不同的二叉搜索树总结 前言 今天是算法营的第34天&#xff0c;希望自己能够…

Kubernetes 集群中安装和配置 Kubernetes Dashboard

前言 上篇成功部署Kubernetes集群后&#xff0c;为了方便管理和监控集群资源&#xff0c;安装Kubernetes Dashboard显得尤为重要。Kubernetes Dashboard 是一个通用的、基于 Web 的 UI&#xff0c;旨在让用户轻松地部署容器化应用到 Kubernetes 集群&#xff0c;并对这些应用进…

深入内核讲明白Android Binder【三】

深入内核讲明白Android Binder【三】 前言一、服务的获取过程内核源码解析1. 客户端获取服务的用户态源码回顾2. 客户端获取服务的内核源码分析2.1 客户端向service_manager发送数据1. binder_ioctl2. binder_ioctl_write_read3. binder_thread_write4. binder_transaction4.1 …

数据结构(四) B树/跳表

目录 1. LRU 2. B树 3. 跳表 1. LRU: 1.1 概念: 最近最少使用算法, 就是cache缓存的算法. 因为cache(位于内存和cpu之间的存储设备)是一种容量有限的缓存, 有新的数据进入就需要将原本的数据进行排出. 1.2 LRU cache实现: #include <iostream> #include <list>…

初步搭建并使用Scrapy框架

目录 目标 版本 实战 搭建框架 获取图片链接、书名、价格 通过管道下载数据 通过多条管道下载数据 下载多页数据 目标 掌握Scrapy框架的搭建及使用&#xff0c;本文以爬取当当网魔幻小说为案例做演示。 版本 Scrapy 2.12.0 实战 搭建框架 第一步&#xff1a;在D:\pyt…

Python网络自动化运维---用户交互模块

文章目录 目录 文章目录 前言 实验环境准备 一.input函数 代码分段解析 二.getpass模块 前言 在前面的SSH模块章节中&#xff0c;我们都是将提供SSH服务的设备的账户/密码直接写入到python代码中&#xff0c;这样很容易导致账户/密码泄露&#xff0c;而使用Python中的用户交…

【2024年 CSDN博客之星】我的2024年创作之旅:从C语言到人工智能,个人成长与突破的全景回顾

我的2024年创作之旅&#xff1a;从C语言到人工智能&#xff0c;个人成长与突破的全景回顾 引言 回望2024年&#xff0c;我不仅收获了技术上的成长&#xff0c;更收获了来自CSDN平台上无数粉丝、朋友以及网友们的支持与鼓励。在这条创作之路上&#xff0c;CSDN不仅是我展示技术成…