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下axios拦截器token刷新机制的实例代码

    vue下axios拦截器token刷新机制的实例代码

    这篇文章主要介绍了vue下axios拦截器token刷新机制的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue中组件(Component)和插件(Plugin)的区别及说明

    Vue中组件(Component)和插件(Plugin)的区别及说明

    这篇文章主要介绍了Vue中组件(Component)和插件(Plugin)的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • 聊聊Vue.js的template编译的问题

    聊聊Vue.js的template编译的问题

    这篇文章主要介绍了聊聊Vue.js的template编译的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 解决VuePress页面乱码问题

    解决VuePress页面乱码问题

    这篇文章主要介绍了解决VuePress页面乱码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue+webpack 打包文件 404 页面空白的解决方法

    vue+webpack 打包文件 404 页面空白的解决方法

    下面小编就为大家分享一篇vue+webpack 打包文件 404 页面空白的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue项目index.html中使用环境变量的代码示例

    vue项目index.html中使用环境变量的代码示例

    在Vue3中使用环境变量的方式与Vue2基本相同,下面这篇文章主要给大家介绍了关于vue项目index.html中使用环境变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • webpack + vue 打包生成公共配置文件(域名) 方便动态修改

    webpack + vue 打包生成公共配置文件(域名) 方便动态修改

    这篇文章主要介绍了webpack + vue 打包生成公共配置文件(域名) 方便动态修改,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue3 中v-model语法糖示例详解

    vue3 中v-model语法糖示例详解

    vue3中的v-model相当于vue2中的v-model和v-bind.sync 修饰符组合在一起的产物(择优整合)v-bind.sync 在 vue3 中被移除了可以在组件标签上使用多个 v-model 绑定属性,使用参数区分,这篇文章主要介绍了vue3 中v-model语法糖,需要的朋友可以参考下
    2024-06-06
  • vue改变循环遍历后的数据实例

    vue改变循环遍历后的数据实例

    今天小编就为大家分享一篇vue改变循环遍历后的数据实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue-element内table插入超链接a标签的使用

    vue-element内table插入超链接a标签的使用

    在Vue Element的table组件中插入超链接,可以使用<el-link>标签替代传统的<a>标签,实现更加整洁的UI设计,具体操作是替换原有的<span>标签,直接使用<el-link>进行超链接的插入,使得链接样式与Element UI保持一致
    2024-09-09

最新评论