Vue3之弹窗

文章目录

  • 第一步、引入JS
  • 第二步、弹框

在前端开发语言Vue3,在管理端如何进行弹窗?下面根据API实现效果。
Element API文档: Element-plus文档
在这里插入图片描述
搭建环境可参考博客【 初探Vue3环境搭建与nvm使用】

第一步、引入JS

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
// 设置变量
const dialogVisible = ref(false)
// 
const handleClose = (done: () => void) => {ElMessageBox.confirm('是否关闭弹窗').then(() => {done()}).catch(() => {// 异常处理 })
}
</script>

第二步、弹框

添加按钮事件

<template><el-button plain @click="dialogVisible = true">点击弹窗</el-button><el-dialogv-model="dialogVisible"title="弹窗"width="500":before-close="handleClose"><span>This is a message</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">确认</el-button></div></template></el-dialog>
</template>

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

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

相关文章

el-tree的使用及控制全选、反选、获取选中

el-tree的使用及控制全选、反选、获取选中 组件使用获取选中的id全选实现反选实现全部代码 组件使用 引入组件&#xff0c;可以参考官网组件引入参考官网示例写好基础数据结构&#xff0c;不知道怎么转换树形机构的看文章&#xff1a;一维数组转树形 <template><el-…

MySQL - 性能优化

使用 Explain 进行分析 Explain 用来分析 SELECT 查询语句&#xff0c;开发人员可以通过分析 Explain 结果来优化查询语句。 比较重要的字段有: select_type : 查询类型&#xff0c;有简单查询、联合查询、子查询等 key : 使用的索引 rows : 扫描的行数 type &#xff1a;…

2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素

三要素之间关系&#xff1a; 有了虚拟场景Scene&#xff0c;相机录像Camera&#xff0c;在相机小屏幕上看到的Renderer Scene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上 首先先描述下Scene&#xff1a; 这个场景为三要素之一&#xff0c;一切需要展示的东西都需…

【docker】容器卷综合讲解,以及go实现的企业案例

容器卷&#xff08;Volumes&#xff09;基础讲解&#xff1a; 容器概念 容器卷&#xff08;Volumes&#xff09;是 Docker 提供的一种持久化存储机制&#xff0c;允许容器持久化数据&#xff0c;即使容器被删除或重新创建&#xff0c;数据仍然可以保留。 卷是独立于容器的&…

cin/cout的性能优化和缓冲区同步问题

目录 背景导入 问题 1.1ios::sync_with_stdio(false) 1.2为什么要解除C/C IO流同步? 1.3使用场景 2.1cin和cout的绑定关系 2.2为什么要解除绑定关系? 2.3注意事项 背景导入 大家可以先看一下这段背景知识;后面我会谈谈自己的理解; 1.在C中&#xff0c;标准输⼊输出流…

node.js基础学习-url模块-url地址处理(二)

前言 前面我们创建了一个HTTP服务器&#xff0c;如果只是简单的http://localhost:3000/about这种链接我们是可以处理的&#xff0c;但是实际运用中一般链接都会带参数&#xff0c;这样的话如果我们只是简单的判断链接来分配数据&#xff0c;就会报404找不到链接。为了解决这个问…

基于springboot中小型制造企业质量管理系统源码和论文

信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古以来的…

服务器密码错误被锁定怎么解决?

当服务器密码错误多次导致账号被锁定时&#xff0c;解决方法需要根据服务器的操作系统&#xff08;如 Linux 或 Windows &#xff09;和具体服务器环境来处理。以下是常见的解决办法&#xff1a; 一、Linux 服务器被锁定的解决方法 1. 使用其他用户账号登录 如果有其他未被…

Java基础——(四)继承

1. 类、超类和子类 在Java中&#xff0c;通过关键字extends表示继承。extends表明正在构造的新类派生与一个已存在的类&#xff0c;已存在的类称为超类&#xff08;superclass&#xff09;、基类&#xff08;base class&#xff09;或父类&#xff08;parent class&#xff09…

Python语法基础(四)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 高阶函数之map 高阶函数就是说&#xff0c;A函数作为B函数的参数&#xff0c;B函数就是高阶函数 map&#xff1a;映射 map(func,iterable) 这个是map的基本语法&#xff0c;…

《datawhale2411组队学习 模型压缩技术7:NNI剪枝》

文章目录 一、NNI简介二、 NNI剪枝快速入门2.1 加载并训练模型2.2 模型剪枝2.3 模型加速&#xff08;剪枝永久化&#xff09;2.4 微调压缩模型2.5 Slim Pruner测试 三、 使用NNI3.0进行Bert压缩&#xff08;剪枝、蒸馏)3.1 数据预处理3.2 训练模型3.3 设置模型蒸馏函数3.4 修剪…

day22:lamp项目部署

一&#xff0c;lamp概述 lamp概述 LAMP 是一组开源软件的缩写&#xff0c;用于搭建动态网站或Web应用程序的基础环境。LAMP 代表了四个主要的组成部分&#xff1a; Linux&#xff1a;操作系统&#xff0c;LAMP 环境的基础。通常使用的是 Linux 发行版&#xff0c;如 CentOS、…

【提高篇】3.6 GPIO(六,寄存器介绍,下)

目录 2.3 输出速度寄存器OSPEEDR(GPIOx_OSPEEDR) (x = A..I) 2.4 上拉/下拉寄存器 (GPIOx_PUPDR) (x = A..I) 2.5 输入数据寄存器(IDR) 2.6 输出数据寄存器(ODR) 2.7 置位/复位寄存器(BSRR) 2.8 BSRR与ODR寄存器的区别 2.3 输出速度寄存器OSPEEDR(GPIOx_OSPEEDR) (…

Java中的“抽象类“与“接口“之间的关系

在Java中&#xff0c;抽象类和接口都是用于实现抽象的机制&#xff0c;但它们在设计目的、使用方式以及功能上有一些不同。下面我将通过文字和代码示例来详细讲解它们之间的关系。 1. 抽象类&#xff08;Abstract Class&#xff09; 特点&#xff1a; 抽象类使用abstract关键字…

ROS2-参数服务器

在 ROS 2 中&#xff0c;节点之间可以通过参数服务器共享和获取参数。这意味着一个节点可以声明一个参数&#xff0c;而其他节点可以读取或修改这个参数。这是通过 ROS 2 的参数系统实现的&#xff0c;它允许节点在参数服务器上声明、设置和获取参数 。 0. 背景 系统有多个 RO…

CSS3网站

&#xff08;看不懂英文的记得点击右上角Change language更改语言&#xff09;&#xff1a; https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors CSS选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value 颜色值 https://ser…

js进阶-中括弧运算

一、题目 下面代码的输出是什么 console.log([[]][[]] [[]]); 二、变量类型转换 1.对于数字运算[负号-]、[减号-]、[乘号*]、[除号/]、[自加号]等&#xff0c;其后的变量都会被尝试转换为数字&#xff1b; 如果其后变量是基础数据类型&#xff0c;那么按基础数据类型转换…

【IMF靶场渗透】

文章目录 一、基础信息 二、信息收集 三、flag1 四、flag2 五、flag3 六、flag4 七、flag5 八、flag6 一、基础信息 Kali IP&#xff1a;192.168.20.146 靶机IP&#xff1a;192.168.20.147 二、信息收集 Nmap -sP 192.168.20.0/24 Arp-scan -l nmap -sS -sV -p- -…

记一次腾讯云海外服务器http能正常访问https访问拒绝问题处理过程

最近双十一, 购了一台腾讯云的海外服务器&#xff0c; 开通后就是一堆的服务器软件安装数据上传和配置&#xff0c;没想到&#xff0c;等待配置完成后才发现https无法正常访问&#xff0c;于是开启了自查。 1. 检查nginx软件的ssl配置 nginx http https配置参考 server {l…

ubuntu多版本安装gcc

1.ubuntu安装gcc 9.3.1 $ sudo apt update $ sudo apt install gcc-9 g-9 二、配置GCC版本 安装完成后&#xff0c;需要使用update-alternatives命令来配置GCC版本。这个命令允许系统在多个安装的版本之间进行选择 1.添加GCC 9.3.1到update-alternatives管理 $ sudo update-a…