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

 更新时间:2023年12月11日 10:03:03   作者:依稀i123  
这篇文章主要介绍了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>

到此这篇关于Vue3+Antd实现弹框显示内容并加入复制按钮的文章就介绍到这了,更多相关Vue3 Antd弹框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • Vue3获取DOM节点的3种方式实例

    Vue3获取DOM节点的3种方式实例

    Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们非要拿到DOM操作DOM怎么办,下面这篇文章主要给大家介绍了关于Vue3获取DOM节点的3种方式,需要的朋友可以参考下
    2023-02-02
  • Vite打包优化之缩小打包体积实现详解

    Vite打包优化之缩小打包体积实现详解

    这篇文章主要为大家介绍了使用Vite缩小打包体积如何实现的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 15分钟学会vue项目改造成SSR(小白教程)

    15分钟学会vue项目改造成SSR(小白教程)

    这篇文章主要介绍了15分钟学会vue项目改造成SSR(小白教程),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Vue中Vue router和axios的封装使用教程

    Vue中Vue router和axios的封装使用教程

    当用户登录后,后台会返回一个token给前端,前端下次进入首页后,会先判断token是否过期,如果过期自动进入登录页面,本文给大家介绍Vue中Vue router和axios的封装使用教程,感兴趣的朋友一起看看吧
    2023-11-11
  • Vue中使用js-cookie详情

    Vue中使用js-cookie详情

    这篇文章主要介绍了Vue中使用js-cookie详情,文章围绕js-cookie的相关资料展开详细内容具有一定的的参考价值,需要的小伙伴可以参考一下
    2022-03-03
  • Vue中XMLHttpRequest的使用方法详解

    Vue中XMLHttpRequest的使用方法详解

    Vue中使用XMLHttpRequest(XHR)可以获取数据的方式与传统的HTML页面相同,本文主要来和大家讲讲它的正确使用方法,希望对大家有所帮助
    2023-05-05
  • 一文带你详细了解vue axios的封装

    一文带你详细了解vue axios的封装

    对请求的封装在实际项目中是十分必要的,它可以让我们统一处理 http 请求,比如做一些拦截,处理一些错误等,本篇文章将详细介绍如何封装 axios 请求,需要的朋友可以参考下
    2023-09-09
  • 详解jquery和vue对比

    详解jquery和vue对比

    这篇文章主要介绍了jquery和vue对比,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue 监听是否切屏和开启小窗的实现过程

    vue 监听是否切屏和开启小窗的实现过程

    这篇文章主要介绍了vue 监听是否切屏和开启小窗的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vite打包性能优化之开启Gzip压缩实践过程

    Vite打包性能优化之开启Gzip压缩实践过程

    vue前端项目发布的时候,打包可实现gzip格式的压缩,下面这篇文章主要给大家介绍了关于Vite打包性能优化之开启Gzip压缩的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论