vue通过v-clipboard实现复制功能

最新推荐文章于 2024-06-12 09:42:09 发布

535366

最新推荐文章于 2024-06-12 09:42:09 发布

阅读量1.8k

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/A535366/article/details/125489035

版权

本文介绍了如何在Vue项目中使用v-clipboard组件来实现文本的复制和剪切功能，包括安装步骤以及成功和失败的回调函数使用方法。

摘要由CSDN通过智能技术生成

安装

npm install clipboard --save 
或
cnpm i clipboard -S

// 引用
import Clipboard from 'clipboard';

v-clipboard:copy - copy 要复制的内容 cut 要剪贴的内容
v-clipboard:success 复制或剪贴成功的回调函数
v-clipboard:error 复制或剪贴失败的回调函数

  <a-modal
    v-model="visible"
    title="链接"
    @ok="handleOk"
  >
    <template #footer>
      <a-button key="submit" type="primary" @click="handleOk">好的</a-button>
    </template>
    <p>分享链接可以邀请其他人</p>
    <p>
      <a-tag color="blue">{
  { roomShareUrl }}</a-tag>
      <a class="fs12" v-clipboard:copy="roomShareUrl" v-clipboard:success="onCopy">复制