vue中js实现点击复制文本到剪贴板-三种方案

这篇具有很好参考价值的文章主要介绍了vue中js实现点击复制文本到剪贴板-三种方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue中js实现点击复制文本到剪贴板-三种方案

因为在网上找了一些很杂乱 不适用 所以自己写一篇记录分享一下
vue中js实现点击复制文本到剪贴板-三种方案

效果:
vue复制内容到剪贴板,javascript,vue.js,前端

方案一:使用原生API(clipboard)

首先,我们需要安装clipboard库,它是一个轻量级的JavaScript库,用于复制/粘贴文本到剪贴板。

命令行运行npm install clipboard --save进行安装。

 npm install clipboard --save

使用该库实现代码如下:

<template>
  <div>
    <button @click="copyText">复制文本</button>
  </div>
</template>

<script>
import clipboard from 'clipboard';

export default {
  methods: {
    copyText() {
      let text = 'Hello World';
      clipboard.writeText(text);
      alert('已复制到剪贴板!');
    }
  }
}
</script>

方案二:使用v-copy指令

我们可以使用vue指令,使元素支持复制文本到剪贴板。

<template>
  <div>
    <button v-copy="text">复制文本</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello World'
    }
  }
}
</script>

// 注册指令
Vue.directive('copy', {
  bind: function(el, binding) {
    el.$copy = function() {
      const textarea = document.createElement('textarea');
      textarea.value = binding.value;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('Copy');
      document.body.removeChild(textarea);
    }
    el.addEventListener('click', el.$copy);
  },
  unbind: function(el) {
    el.removeEventListener('click', el.$copy);
  }
});

方案三:使用clipboard.js库

clipboard.js库是一个现成的插件,可以通过安装运用它来实现复制文本到剪贴板的功能。

命令行运行 npm install clipboard --save 进行安装。

npm install clipboard --save 

使用clipboard.js实现代码如下:

<template>
  <div>
    <button class="copy-btn" data-clipboard-text="Hello World">复制文本</button>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard';

export default {
  mounted() {
    new ClipboardJS('.copy-btn');
  }
}
</script>

方案三:使用clipboard.js库(vue3版)

安装 clipboard.js 库
可以使用 npm 或 yarn 安装 clipboard.js,命令如下:

npm i clipboard
# 或者
yarn add clipboard

完整代码如下:

<template>
  <button class="copy-btn">复制</button>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import ClipboardJS from 'clipboard'

const clipboardText = ref('hello world')
const copyText = () => {
  const clipboard = new ClipboardJS('.copy-btn', {
    text() {
      return clipboardText.value
    }
  })
  clipboard.on('success', () => {
    console.log('复制成功')
  })
  clipboard.on('error', () => {
    console.log('复制失败')
  })
}

onMounted(() => {
  copyText()
})
</script>

以上三种方案,都可以实现复制文本到剪贴板的功能,具体应用中,可根据实际情景选择适合自己的方案。文章来源地址https://www.toymoban.com/news/detail-620080.html

到了这里,关于vue中js实现点击复制文本到剪贴板-三种方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中如何进行剪贴板操作?

    在Web应用程序中,剪贴板(Clipboard)操作是非常常见的操作之一。Vue.js是一款流行的JavaScript框架,它提供了一些有用的工具来处理DOM元素和用户界面。本文将介绍如何在Vue.js中使用剪贴板操作。 要在Vue中使用剪贴板操作,我们需要使用浏览器原生API,即Clipboard API。这个API提

    2024年02月09日
    浏览(39)
  • vue使用html2canvas实现一键截图并赋值到剪贴板,只截取当前显示器上可视的内容

    使用 html2canvas 和 clipboard API 实现整页截图并填充至剪切板。 访问剪切板的api只支持在https或者本地localhost上使用,如果是http,则无法使用 首先需要从npm安装html2canvas 然后在代码中导入这个包: 之后绑定一个按钮来实现该功能,比如点击一个按钮,然后就开始截图当前页面并

    2024年02月15日
    浏览(55)
  • 【Qt 6】读写剪贴板

    剪贴板是个啥就不用多介绍了,最直观的功能是实现应用程序之间数据共享。就是咱们常说的“复制”、“粘贴”功能。 在 Qt 中,QClipboard 类提供了相关 API 让应用程序具备读/写剪贴板的能力。数据通过 QMimeData 类包装。该类使用 MIME 类型来标识数据。比如,要包装的数据是

    2024年02月04日
    浏览(33)
  • Ubuntu20.04-剪贴板

    针对图形界面用户 简单轻量级剪贴板管理器 更强大的剪贴板管理器,包含历史记录和同步功能

    2024年01月16日
    浏览(44)
  • Android Studio 是如何和我们的手机共享剪贴板的

    近期完成了target33的项目适配升级,随着AGP和gradle的版本升级,万年老版本Android Studio(后文简称AS)也顺便升级到了最新版Android Studio Giraffe | 2022.3.1,除了新UI外,最让我好奇的是这次的Running Devices功能(官方也称为Device mirroring)可以控制真机了. 按照操作提示完成开启后就能在AS看到看

    2024年02月07日
    浏览(34)
  • 如何在本地组策略编辑器中启用或禁用剪贴板历史记录

    复制粘贴是我们大家都会做的事情,可能一天要做多次。但是,如果你需要一次又一次地复制同样的几件事,你该怎么办?如何在设备上复制内容? 从Windows 10版本17666开始,微软正在解决这一问题,并将剪贴板提升到一个新的水平,只需按下Win+V,你将获得全新的剪贴板体验

    2024年02月13日
    浏览(50)
  • 2023-08-07 vmvare安装ubuntu18.04 ,安装VMware Tools后剪贴板无法共享问题

    一、安装VMware Tools死活不行,不能跟主机共享粘贴板,解决方法 二、实际操作,可以跟windows主机互相复制粘贴,非常莫名其妙。   三、参考文章 vmvare安装ubuntu后剪贴板无法共享问题_vmware 共享剪贴板_不许歪叽的博客-CSDN博客

    2024年02月13日
    浏览(46)
  • SAP ABAP Microsoft Excel 在剪贴板上有大量信息。是否保留其内容,以便此后粘贴到其他程序中?

    引言: 在 SAP 批导/上载 Excel 文件时,出现“在剪贴板上有大量信息。是否保留其内容,以便此后粘贴到其他程序中?”的弹窗提示,无论点击“是”、“否”、“取消”最终批导/上载都失败,数据为空。 : SAP ABAP Excel批导上载 ALSM_EXCEL_TO_INTERNAL_TABLE 在剪贴板上有大量

    2024年02月02日
    浏览(45)
  • (简单成功)原生js实现点击复制文本

    目录 背景 核心代码 案例 我们开发中可能会有点击复制的功能,那么下面将讲述 select() 方法用于选择该元素中的文本。 document.execCommand(\\\'copy\\\') 执行浏览器复制命令

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包