vben:对话框组件

本文将介绍如何在vben admin vue 框架中,创建对话框组件,并成功应用的代码。代码即插即用。

结果如下图所示,

在这里插入图片描述

一、创建对话框组件

创建 myModal/index.vue

<template><div><BasicModal@register="registerModal"v-bind="$attrs"title="示例对话框"@ok="handleSubmit"width="58%"><p>这是示例内容</p></BasicModal></div>
</template>
<script lang="ts" setup>import { BasicModal, useModalInner } from '/@/components/Modal';const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data: any) => {setModalProps({ confirmLoading: false });console.log(data);});const handleSubmit = () => {closeModal();};
</script>

二、应用对话框组件

<template><div class="more"  @click="showModal"><span class="more-span">点击显示对话框</span><i class="arrow"></i></div><myModal width="50%" @register="modalOpen" @success="handleSuccess" ></myModal>
</template><script lang="ts" setup>import { ref } from 'vue';import myModal from './myModal/index.vue';import { useModal } from '/@/components/Modal';const [modalOpen, { openModal }] = useModal();// true时显示。const showModal = (record: any) => {openModal(true, { isUpdate: true, record });};
</script>

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

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

相关文章

hive学习(五)

一、hive的DML操作 1.load&#xff08;向表中装载数据&#xff09; hive> load data [local] inpath 路径 [overwrite] into table 表名 [partition (partcol1val1,…)];特殊说明 1&#xff09;local&#xff1a;标识从本地加载数据到Hive表&#xff0c;若没有local的话从…

红石电路(我的世界)

红石电路&#xff08;Redstone circuits&#xff09;为玩家建造的&#xff0c;可以用于控制或激活其他机械的结构。 电路本身既可以被设计为用于响应玩家的手动激活&#xff0c;也可以让其自动工作——或是反复输出信号&#xff0c;或是响应非玩家引发的变化&#xff0c;例如生…

shell脚本--正则表达式

一、正则表达式的类型 在Linux中,有两种流行的正则表达式引擎: POSIX基础正则表达式(basic regular expression,BRE)引擎 POSIX扩展正则表达式(extended regular expression,ERE)引擎 POSIX BRE引擎通常出现在依赖正则表达式进行文本过滤的编程语言中。它为常见模式提供…

STM32基于HAL库使用串口+DMA 不定长接收数据 学习记录

我这些博客都只是记录一下自己学习的内容&#xff0c;以及记录一些思考过的问题和疑惑的东西 这里的代码借鉴了一位博主的博客 地址&#xff1a;[] 这里cubemx串口基础配置部分参考这一篇博客 &#xff08;只配置了串口中断接收和printf重定向&#xff09; 这一篇博客我们需要开…

分布式计算架构详解以及任务调度方式

信息技术领域重要分支—分布式计算。分布式计算通过将任务分配到多个物理的计算资源上进行处理&#xff0c;以来提高计算效率和资源利用率。今天主讲分布式计算架构的关键组成以及在云服务器背景下任务调度的不同方式&#xff0c;然后再综合来看这些调度策略是怎样适应云环境的…

C# 三种定时器的用法

目录 1.System.Timers.Timer 2.System.Windows.Forms.Timer 3.System.Threading.Timer 4.简单的封装 这里介绍三种常用的定时器&#xff0c;方便查阅资料或直接复制使用。 1.System.Timers.Timer System.Timers.Timer 类定义了一个计时器&#xff0c;该计时器按固定间隔触…

线性表之数组

数组&#xff08;Array&#xff09;是 C/C 中最基础和重要的数据结构之一&#xff0c;它提供了一种有效存储和访问固定大小元素集合的方式。关于数组的定义和使用相信大家都已经熟练掌握&#xff0c;本文将着重为大家剖析数组的物理结构和逻辑结构。 1. 数组的物理结构 数组的…

大语言模型-GPT3-Language Models are Few-Shot Learners

一、背景信息&#xff1a; GPT3是于2020 年由OpenAI 发布的预训练语言模型。 GPT3在自然语言处理&#xff08;NLP&#xff09;任务中表现出色&#xff0c;可以生成连贯的文本、回答问题、进行对话等。 GPT3的网络架构继续沿用GPT1、GPT2的是多层Transformer Decoder改的结构。…

MySQL的安装配置以及可视化工具的安装

一、MySQL 的安装配置 1、找到官网 MySQL :: Download MySQL Installer (Archived Versions)https://downloads.mysql.com/archives/installer/ 2、下载 3、安装 接下来只需要一直 next 下去就好 此时我们的MySQL就安装完成了&#xff0c;有些人的电脑在点击完这个finish以后…

Linux内核6.12新特性:panic之后扫码显示故障信息

Linux 内核 6.12 版本即将引入一项有趣的功能——在内核Panic时显示一个可选的二维码。这一功能将允许用户通过扫描二维码直接访问内核Panic信息的日志&#xff0c;从而更容易地诊断问题所在。 这不是 Linux 第一次尝试使用二维码。早在2014年&#xff0c;就有过关于在内核Pani…

HarmonyOS(52) 使用安全控件SaveButton保存图片

SaveButton使用简介 前言SaveButton简介约束与限制 实现点击事件全部源码 参考资料&#xff1a; 前言 在HarmonyOS(50) 截图保存功能实现一文中简单介绍了截图保存功能&#xff0c;本篇博文介绍一个更简单的保存图片控件SaveButton. SaveButton简介 SaveButton允许用户通过点…

EasyCVR中的H.265技术:助力实现大规模高效流畅的视频监控应用

随着视频监控技术的不断发展和用户对视频质量要求的不断提高&#xff0c;高效能、低延迟的视频编码技术成为视频监控系统中的重要支撑。TSINGSEE青犀视频旗下的EasyCVR视频汇聚平台凭借其强大的视频处理能力和对H.265技术的支持&#xff0c;在视频监控系统中展现出显著的应用优…

运用Premiere自学视频剪辑,这些岗位你能胜任!

随着短视频的兴起和火热&#xff0c;短视频后期制作越来越受到人们的重视&#xff0c;甚至衍生出很多岗位的高薪工作。如大家所了解的&#xff0c;Adobe premiere正是一款视频后期剪辑和制作工具&#xff0c;其功能强大&#xff0c;应用也十分广泛&#xff0c;是从事后期工作者…

Mysql常见问题汇总【持续更新】

文章目录 Invalid default value for CREATE_TIME 或则 启动时 sql_mode 报错1130错误码&#xff0c;MySQL不能通过ip连接第一种命令方式图形化界面 mysql给用户授管理员权限mysql 新建用户时&#xff0c;主机名选择区别Mysql常用命令大全 Invalid default value for CREATE_T…

四大消息队列:Kafka、ActiveMQ、RabbitMQ、RocketMQ对比

四大消息队列&#xff1a;Kafka、ActiveMQ、RabbitMQ、RocketMQ对比 1. 社区活跃度2. 持久化消息3. 技术实现4. 高并发性能5. RabbitMQ与Kafka对比 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在软件开发中&#xff0c;消息队列&#xf…

基础算法(1)——双指针

1. 概念 常见的双指针有两种形式&#xff0c;一种是对撞指针&#xff0c;一种是快慢指针 1.1 对撞指针 一般用于顺序结构中&#xff0c;也称为左右指针 对撞指针从两端向中间移动&#xff0c;一个指针从最左端开始&#xff0c;另一个从最右端开始&#xff0c;逐渐往中间逼近…

.net dataexcel winform控件 更新 日志

增加 列宽度调整时动态显示列象素大小 更改列的宽度可以使用 column.Width属性进行修改

【持续更新】Mχ Plaayer Pro 1.86.0安卓知名播放器最新免费高级修改版

Mχ Plaayer Pro MOD 版本免费 APK&#xff0c;专为安卓手机和平板打造。这是一款功能强大的视频播放器&#xff0c;具备先进的硬件加速技术和字幕支持功能。 • 硬件加速 - 新增 HW 解码器帮助更多视频格式实现硬件加速。 • 多核心解码 - Mχ Plaayer 是首款支持多核心解码的…

基于STM32的RFID高速收费系统(论文+源码+实物)

1系统方案设计 本文基于STM32的RFID高速收费系统&#xff0c;其可以实现小车和货车两种车型收费&#xff0c;当车辆超过了规定的重量后&#xff0c;出现声光报警提示&#xff0c;并且启动杆不会抬起&#xff0c;只有当车辆重量低于设置值时&#xff0c;启动杆才会自动抬起&…

【Linux】在 bash shell 环境下,当一命令正在执行时,按下 control-Z 会?

目录 题目分析答案 题目 分析 ctrl-c&#xff1a; 发送 SIGINT 信号给前台进程组中的所有进程。常用于终止正在运行的程序&#xff1b;ctrl-z&#xff1a; 发送 SIGTSTP信号给前台进程组中的所有进程&#xff0c;常用于挂起一个进程&#xff1b;ctrl-d&#xff1a; 不是发送信…