antdvue点击按钮弹窗功能

最新推荐文章于 2024-07-07 15:46:10 发布
最新推荐文章于 2024-07-07 15:46:10 发布
阅读量3.6k 收藏 4
点赞数 1
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuxiangyu827/article/details/122605793
版权
这篇博客介绍了如何在antdvue中利用a-modal组件实现按钮点击后弹出确认取消的弹窗功能。内容涉及到在表格操作中如删除、发布和取消发布的场景，通过设置visible状态和modaltitle，并编写判断方法，确保弹窗能够正确显示和关闭。
摘要由CSDN通过智能技术生成

点击按钮实现在表格上方出现弹窗，询问确认取消功能

使用了antd的一个弹窗组件a-modal 

     <a-modal
      :title="modalTitle"
      :visible="visibleDel"
      :maskClosable="true"
      :width="480"
      :footer="null"
      @cancel="
        () => {
          visibleDel = false
        }
      "
    >
      <div class="form-main">
        <div class="content">
          <div class="content-sure">{
  {modalContent}}</div>
        </div>
        <div class="footer">
          <a-button type=
最低0.47元/天 解锁文章
XxY...
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Umi+Antd+Ts实战】新增商品弹框组件【V1.0】
Milk~每天分享一点点，技术进步一点点
10-13 1117
新增商品弹框组件 先看效果 1.点击+符号，弹出新增商品组件 路由配置可以参考下面博客 https://blog.csdn.net/weixin_43352901/article/details/108536112 2.新增商品弹框内容 文件目录 文件解析 const.ts export const formLayout = { labelCol: { sm: { span: 6 }, xs: { span: 28 } }, wrapperCol: { sm:
利用antd 组件来实现点击按钮出现弹窗选择从而实现不同页面的打印
sakura的博客
07-09 3771
今天做没有新的任务，就想把之前的代码做一些修改。 之前：点击这个按钮就直接打印了，并且附录也会跟着打印，但是其实有的情况下不想打印附录，我就把一些逻辑做了一些修改，现在效果如下。 现在点击按钮会出现这样的一个弹窗，如果点击“需要”就会一并打印，如果点击“不需要”，就只打印说明书不打印附录。 具体的一些代码实现如下： 首先是要从antd来引用这个组件 import {Modal} from 'antd' 然后要定义一个变量，默认情况下给他的赋值为false...
vue3+antd 实现点击按钮弹出对话框
最新发布
Python私教
07-07 1103
【代码】vue3+antd 实现点击按钮弹出对话框。
antd 弹出框
userNing的博客
03-11 265
【代码】antd 弹出框。
基于antd-vue的可拖拽弹窗
youzigrowing的博客
02-01 537
【代码】基于antd-vue的可拖拽弹窗。
Antd-Design List渲染列中Button 点击事件 传递参数
datouniao1的博客
11-23 3250
在antd-design中使用List ，在渲染的列表中包含button 我们想通过button 点击事件对列表中的某一项进行操作，那么如何在button 点击事件调用的函数中获取到相关的参数，直接传入值都可以，onClick={(e)=>this.delByGuid(item.rowguid)} 希望对你有所帮助
vue3.2 + antd vue3. 基于vue3.2 + antd vue3的后台管理系统.zip
12-31
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用...
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
vue3+vite+antd 后台管理系统基础模板
02-06
在Vue3项目中，通过适配器可以很好地与Vue3集成，提供一套美观、一致的设计风格和丰富的交互组件，如表格、按钮、输入框等，大大简化了前端开发的工作。 这个"vue3+vite+antd 后台管理系统基础模板"是一个用于快速...
Colder.Admin.AntdVue:基于.NET 5 + Ant设计Vue的Admin Fx
04-28
Colder.Admin.AntdVueWeb后台快速开发框架,.NET5+Ant Design Vue版本代码(GitHub)：文档(GitHub)：代码(码云镜像)：文档(码云镜像)：在线预览地址： （账号/密码：Admin 123456）
vue二次封装ant-design-vue中的Modal弹窗组件，实现拖拽，全屏两种功能，原有参数属性不变
m0_57071129的博客
01-17 2742
在我们的项目的有的地方需要用弹框的拖拽，以及弹窗自定义全屏显示的需求，所以再次将二次合一，同时弹框里面内容自适应屏幕高度在ant-design-vue中，已经实现了拖拽，全屏的功能，下面是ant官网的示例。
vue2.0 + element-ui 实战项目-点击按钮弹出form表单（五）
热门推荐
祈澈菇凉
11-05 1万+
自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~ Element UI手册：https://cloud.tencent.com/developer/doc/1270 github地址：h...
antd design pro菜单打开http链接
weixin_45190306的博客
07-16 3825
pro的动态菜单之前有写过，这里就不重复了。现在遇到的问题是点击菜单的某一个跳转的是http链接，不是路由，将http放在菜单时进行跳转时会跳转到当前IP地址后面加/+http的地址，相当于http前面有一条斜杆。 翻阅pro的githup查issues看别人有没有遇到类似的问题，发现了两个类似的： 如何配置不展示在菜单中的router：https://github.com/ant-design/ant-design-pro/issues/227 menu里配置外链，生成path错误：https://git
ant design 组件使用之 Popconfirm 气泡确认框在外部组件绑定点击事件后 onConfirm 不生效
YZRHANYU的博客
03-07 1603
ant design 组件使用之 Popconfirm 气泡确认框在外部组件绑定点击事件后 onConfirm 不生效
【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗） 弹出确认框
Java&Develop的博客
02-25 2141
【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）
vue在子组件中调用接口、点击按钮弹出窗口显示内容
upStar1的博客
07-04 3614
1.从子组件获取接口 2.点击子组件内的按钮显示内容
【版本问题】Popconfirm 气泡确认框不弹提示
Madman528的博客
03-11 365
因为花裤衩的版本太老了，我看的文档不对 先看他用的版本号是多少
Vue点击按钮弹出独立页面(弹出窗口)
weixin_46221897的博客
02-24 9843
话不多说上代码 Html <template> <div style="padding:10px 20px 0 20px;"> <el-button class="wp-but" @click="Popup">catia</el-button> </div> </template> Js <script> export default { data() {
重新启程之Vue——点击按钮，弹出弹窗组件
qq_44139411的博客
11-10 1万+
目录 一、点击按钮，弹出弹窗组件 二、用v-for渲染一堆按钮，给每个按钮绑定不同的事件，其中一个按钮，点击则显示弹窗组件 一、点击按钮，弹出弹窗组件 按钮：<el-button> 弹窗：<log-dialog> <el-button type="primary" size="small" @click="LogDialogVisible = true" plain .
antd vue 中 table列表中实现点击预览xlsx文件弹窗可以吗
06-07
是的，可以通过以下步骤在 Antd Vue 的 Table 列表中实现点击预览 XLSX 文件弹窗： 1. 安装 `file-saver` 和 `xlsx` 库 ``` npm install file-saver xlsx --save ``` 2. 在 Table 组件中添加一个列，用于显示预览按钮 ```vue <template> <a-table :dataSource="dataSource" :columns="columns"> <template #action="text, record"> <a @click="previewExcel(record)">预览</a> </template> </a-table> </template> <script> import { saveAs } from 'file-saver'; import XLSX from 'xlsx'; export default { data() { return { dataSource: [{ name: 'John', age: 32 }, { name: 'Bob', age: 24 }], columns: [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Action', key: 'action', slots: { customRender: 'action' }, }, ], }; }, methods: { previewExcel(record) { const worksheet = XLSX.utils.json_to_sheet([record]); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); const fileBuffer = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' }); const blob = new Blob([fileBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); saveAs(blob, `preview-${record.name}.xlsx`); }, }, }; </script> ``` 在上面的代码中，我们添加了一个 `action` 列，用于显示预览按钮。在 `previewExcel` 方法中，我们将当前行的数据转换为 XLSX 文件，并将其保存为 Blob 对象，然后使用 `file-saver` 库的 `saveAs` 方法将该 Blob 对象保存为文件并下载。 注意，这里我们使用的是 `json_to_sheet` 方法将数据转换为 XLSX 文件，只会将第一个数据对象转换为 XLSX 文件。如果需要将整个列表转换为 XLSX 文件，可以使用 `json_to_sheet` 方法将整个数据源转换为 XLSX 文件，然后使用 `book_append_sheet` 方法将该表添加到工作簿中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值