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弹框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • Vue中原生template标签失效如何解决

    Vue中原生template标签失效如何解决

    这篇文章主要介绍了Vue中原生template标签失效如何解决,找了整一天也没找着这事件为什么触发不了,第二天意识到原生代码里的template可能有问题,在原生环境中template标签内部的东西是不会渲染出来的,虽然解析器在加载页面的时候确实会处理这部分代码片段
    2023-02-02
  • 利用Vue.js制作一个拼图华容道小游戏

    利用Vue.js制作一个拼图华容道小游戏

    这篇文章主要为大家详细介绍了如何利用Vue.js编写一个拼图华容道游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue实现可以快进后退的跑马灯组件

    vue实现可以快进后退的跑马灯组件

    这篇文章主要为大家详细介绍了vue编写一个可以快进后退的跑马灯组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue.js数字输入框组件使用方法详解

    Vue.js数字输入框组件使用方法详解

    这篇文章主要为大家详细介绍了Vue.js数字输入框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Intellij IDEA搭建vue-cli项目的方法步骤

    Intellij IDEA搭建vue-cli项目的方法步骤

    这篇文章主要介绍了Intellij IDEA搭建vue-cli项目的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 详解Vue中公共组件的封装

    详解Vue中公共组件的封装

    在Vue中,组件是构建用户界面的基本单位,封装公共组件是一种良好的实践,可以提高代码的可复用性和可维护性,下面我们就来看看如何封装一个公共的按钮组件吧
    2023-08-08
  • Vue中组件的传值方式详解

    Vue中组件的传值方式详解

    这篇文章主要介绍了Vue中组件的传值方式详解,Vue中最常见的组件之间的通信方式有12种,今天我们会详细讲解父传子props方式和子传父emit以及非父子组件传值,需要的朋友可以参考下
    2023-08-08
  • Vue两个通信方式与动画过度及混入使用介绍

    Vue两个通信方式与动画过度及混入使用介绍

    最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue 实现从文件中获取文本信息的方法详解

    Vue 实现从文件中获取文本信息的方法详解

    这篇文章主要介绍了Vue 实现从文件中获取文本信息的方法,结合实例形式详细分析了vue.js基于export导出的文件信息读取相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • Vue中的混入的使用(vue mixins)

    Vue中的混入的使用(vue mixins)

    这篇文章主要介绍了Vue中的混入的使用(vue mixins),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论