Vue3+Antd实现弹框显示内容并加入复制按钮

使用Vue3+antd实现点击弹框出现内容并可复制内容的功能:

HTML部分:

<a-button type="primary" @click="showModel">
  打开弹框
</a-button>

<!-- @ok 是弹框中确定按钮的操作,@cancel 是弹框中取消按钮的操作 -->
<a-modal
    title="内容如下"
    :visible="isModalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
>
  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>弹框内容</p>
    <a-button type="primary" @click="copyContent">复制</a-button>
  </div>
</a-modal>

JS部分:

  import {message} from "ant-design-vue";
  
  const isModalVisible = ref(false)

  // 打开弹框
  const showModel = () => {
    isModalVisible.value = true
  }
  // 弹框中取消按钮
  const handleCancel = () => {
    isModalVisible.value = false;
  }
  // 弹框中复制按钮
  const copyContent = () => {
    const textToCopy = '弹框内容';    // 弹框内容,即<p>中的内容
    navigator.clipboard.writeText(textToCopy).then(() => {
      message.success("复制成功")
      console.log('Text copied to clipboard');
    }).catch((err) => {
      message.warning("复制失败")
      console.error('Unable to copy text to clipboard', err);
    });
  }
  // 弹框中确定按钮
  const handleOk = () => {
    isModalVisible.value = false;
  };

以上代码弹框是有两个按钮:取消、确认。

如何实现只有一个取消/确认按钮

新增::footer="null" 即可取消掉两个按钮,但是要手动加入按钮:

<a-modal
    title="内容如下"
    :visible="isModalVisible"
    :footer="null"
>
  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>弹框内容</p>
    <a-button type="primary" @click="copyContent">复制</a-button>
  </div>
  <div align="right">
    <a-button type="default" align="right" @click="handleCancel">取消</a-button>
  </div>
</a-modal>

修改确认/取消按钮位置样式等

<a-button type="primary" @click="showModel">
  打开弹框
</a-button>

<!-- @ok 是弹框中确定按钮的操作,@cancel 是弹框中取消按钮的操作 -->
<a-modal
    title="内容如下"
    :visible="isModalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
>

  <template #okText>
    修改'确认'按钮中的文本
  </template>
  <template #cancelText>
    修改'取消'按钮中的文本
  </template>
  <template #footer>
    自定义按钮位置样式等
  </template>
  <template #closeIcon>
    修改弹框右上角'x'的样式
  </template>

  <div  style="display: flex; flex-direction: column; align-items: center;">
    <p>弹框内容</p>
    <a-button type="primary" @click="copyContent">复制</a-button>
  </div>
</a-modal>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【网络安全】网络设备可能面临哪些攻击?

网络设备通常是网络基础设施的核心&#xff0c;并控制着整个网络的通信和安全&#xff0c;同样面临着各种各样的攻击威胁。 对网络设备的攻击一旦成功&#xff0c;并进行暴力破坏&#xff0c;将会导致网络服务不可用&#xff0c;且可以对网络流量进行控制&#xff0c;利用被攻陷…

Python格式化字符串(格式化输出)

Python 提供了“%”对各种类型的数据进行格式化输出&#xff0c;例如如下代码&#xff1a; price 108 print ("the books price is %s" % price) 上面程序中的 print 函数包含以下三个部分&#xff0c;第一部分是格式化字符串&#xff08;相当于字符串模板&#xff…

android bitmap保存本地背景是黑色的 解决方法

前言 最近在项目种有个电子签名功能 需要客户手写签名 然后保存本地 上传云端 //获取bitmapBitmap bitmapFromView mSignatureView.getBitmapFromView();BitmapUtil.saveImageToGallery(this, bitmapFromView);压缩为JPEG格式 saveImageToGallery 方法我做了修改 之前用的Bit…

外贸获客怎么做?有哪些技巧?

外贸获客是许多企业拓展海外市场的关键一环&#xff0c;为了成功地吸引潜在客户&#xff0c;我们需要了解一些基本的获客技巧&#xff0c;本文将分享一些实用的方法和技巧&#xff0c;帮助您在外贸领域获得更多的客户。 一、了解目标客户 在开展外贸业务之前&#xff0c;了解…

java--LinkedList集合的底层原理

1.什么是链表&#xff1f;有啥特点&#xff1f; ①链表中的结点是独立的对象&#xff0c;在内存中是不连续的&#xff0c;每个结点包含数据值和下一个结点的地址。 ②链表的特点1&#xff1a;查询慢&#xff0c;无论查询那个数据都要从头开始找。 ③链表的特点2&#xff1a;链…

LabVIEW使用单板RIO开发远程监控电源信号

LabVIEW使用单板RIO开发远程监控电源信号 设计和构建用于智能电网的本地功耗分析系统&#xff0c;主要服务于领先的电力监控设备设计者和制造商。随着智能电网投资的增加&#xff0c;对于能够有效处理替代电源&#xff08;如太阳能和风能&#xff09;间歇性功率水平的技术需求…

Ubuntu系统使用快速入门实践(七)——软件安装与使用(5)

Ubuntu系统使用快速入门实践系列文章 下面是Ubuntu系统使用系列文章的总链接&#xff0c;本人发表这个系列的文章链接均收录于此 Ubuntu系统使用快速入门实践系列文章总链接 下面是专栏地址&#xff1a; Ubuntu系统使用快速入门实践系列文章专栏 文章目录 Ubuntu系统使用快速…

可以组成网络的服务器 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 在一个机房中&#xff0c;服务器的位置标识在n*m的整数矩阵网格中&#xff0c;1表示单元格上有服务器&#xff0c;0表示没有。如果两台服务器位于同一行或者同一列…

docker 安装mysql 主从复制

一、搭建主服务器的mysql 1.1 先新建文件夹 mkdir -p /data/dockerData/mysql-master/conf 1.2 进入/data/dockerData/mysql-master/conf目录下新建my.config, [mysqld] ## 设置server_id&#xff0c;同一局域网中需要唯一 server_id101 ## 指定不需要同步的数据库名称 bin…

springboot房屋房产房管家中介服务系统+java-ssm

随着房地产市场的快速发展&#xff0c;中国经济飞速发展&#xff0c;社会城市化建设的脚步不断加快&#xff0c;社会城市化的规模也在不断扩大&#xff0c;房屋中介逐渐成为当今社会生活的重要部分&#xff0c;房屋中介的市场竞争也日益加剧&#xff0c;房屋中介的管理与服务成…

redis数据淘汰策略:

面试官&#xff1a;了解redis数据淘汰策略吗&#xff1f; 就是当Redis内存使用达到设置的上限时&#xff0c; 此时需要使用redis数据淘汰机制来进行数据淘汰。&#xff08;有针对key的 和 针对value数据的&#xff09; Redis支持8种不同策略来选择要删除的key&#xff1a; n…

CTF比赛中web安全题型讲解

在CTF&#xff08;Capture The Flag&#xff09;竞赛中&#xff0c;Web安全题目是测试参赛者对Web应用漏洞利用和防御能力的重要环节。以下是30道Web类题型及其标准答案&#xff0c;对初次打比赛的网安人员来说&#xff0c;还是有一些帮助的&#xff0c;喜欢可以收藏。 题目及…

PDI/Kettle-9.4.0.0-343源码下载及编译

目录 &#x1f351;一、概要&#x1f34a;最新版本10.x&#xff08;2023-11-30&#xff09; &#x1f351;二、下载&#x1f351;三、编译&#x1f34a;3.1、导入开发工具&#x1f34a;3.2、开始编译&#x1f34a;3.3、编译报错&#x1f34a;3.4、报错原因&#xff1a;jdk版本低…

【AI底层逻辑】——数学与机器学习:优雅的智慧之舞

目录 “宝藏网站” 聊聊数学 “华尔兹” “智慧之舞” 后续的章节我们将迎来新的篇章&#xff0c;新的切入点探索AI的奥秘&#xff0c;通过揭示高数、矩阵、概率论等数学知识与机器学习的关系来深入理解AI的奥秘&#xff01; “宝藏网站” 开头先给大家上几个宝藏网站&am…

对于版面识别的一个疑问

paddleocr识别出来的rigion是无序的&#xff0c;我用augument-xy-cut对bbox排序之后。 下一步就是对自然段进行划分&#xff0c;即res字段里面的text_region进行merge_para&#xff0c;不过这时我产生了一个疑问&#xff0c;既然有merge_para了&#xff0c;前面对bbox的排序有必…

Threejs发光闪烁提示特效

一、导语 发光闪烁特效应该在我们的项目中是经常需要去封装的一个特效吧&#xff0c;一般用于点击选择&#xff0c;选中物体&#xff0c;或者一些特效加持于中心物体&#xff0c;物体碰撞检测后的发光特效等等 二、分析 我们可以合理的使用后处理特效&#xff0c;上步骤&am…

SpringTask

SpringTask是一种用于定时任务调度的框架周期性任务、定时任务需要SpringTask框架 比较出名的框架有三种&#xff1a; &#xff08;1&#xff09;SpringTask(没有很大的并发量需求量&#xff0c;用SpringTask足够) &#xff08;2&#xff09;Quartz(老牌的定时任务&#xff0c…

如何更改Jupyter Notebook中的环境?

1.首先&#xff0c;打开终端 2.接着&#xff0c;分别输入以下命令 conda env list 把EXPose替换为自己的环境变量 conda activate EXPose 3.接下来安装‘ ipykernel ’软件包 conda install ipykernel 4. 将该环境添加到Jupyter Notebook中&#xff1b;在Jupyter Notebook…

AICore 带来了 Android 专属的 AI 能力,它要解决什么?采用什么架构思路?

前言 Google 最近发布的 Gemini 模型在全球引起了巨大反响&#xff0c;其在多模态领域的 Video demo 无比震撼。对于 Android 开发者而言&#xff0c;其中最振奋人心的消息莫过于 Gemini Nano 模型将内置到 Android 系统当中&#xff0c;并开放给开发者使用。 事实上&#xf…

漏洞复现-华为Auth-HTTP服务器任意文件读取漏洞(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…