Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >复制文字到剪贴板—Vue-clipboard2

复制文字到剪贴板—Vue-clipboard2

作者头像
Ewall
发布于 2019-08-18 14:54:20
发布于 2019-08-18 14:54:20
1.6K00
代码可运行
举报
文章被收录于专栏:vue学习vue学习
运行总次数:0
代码可运行

就这么一个简单的小组件,实现一个小功能;过了一段时间以后新需求要复现这个功能竟然又忘记了怎么写,又去找着github网址看了一下文档。。。。还是写下来。

1、安装

github上了解一下:Vue-clipboard2

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ npm install --save vue-clipboard2

2、使用

main.js中引入,当然你也可以在单个页面中引入。

引入

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <button class="btn" @click="doCopy">button</button>
</template>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
doCopy() {
  this.$copyText('这里放入要粘贴的内容').then((e) => {
      // success
      console.log(e);
  }, (e) => {
      // fail
      console.log(e);
  });
}

3、结语

  • 我这是采用github官网示例中sample2的写法,我觉得是最简单的实现方式,其他的你可以去看看官网;
  • 希望这个功能以后五分钟能搞定,不要再费十分钟。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.08.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript 剪贴板 Clipboard 的那些事儿!
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第19天,点击查看活动详情
掘金安东尼
2022/09/22
1.4K0
JavaScript 剪贴板 Clipboard 的那些事儿!
Clipboard.js实现复制文本到剪贴板功能[通俗易懂]
Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件,该插件可以将输入框,文本域,DOM节点元素中的文本内容复制到剪贴板中。
全栈程序员站长
2022/09/15
2.4K0
鹅湖在 JavaScript 中将选定的输入复制到剪贴板。
首先我们会选择复制按钮和所有复选框元素。然后,它会为复制按钮添加一个事件监听器。当按钮被点击时,代码将循环遍历所有复选框,检查它们是否被选中,并将它们的值添加到一个数组中。最后,它会将所选值组合成一个单独的字符串,并将其复制到剪贴板中。
泽霖
2023/12/10
3971
通过JS实现剪贴板操作
在网上找到很多种方法,ZeroClipboard.js、clipboard.js 插件等,但是都没有办法解决本人项目中的问题,最后发现可以通过 navigator 对象得到 clipboard,进行剪切板操作
赤蓝紫
2023/01/02
2.7K0
通过JS实现剪贴板操作
网页实现把文本复制到粘贴板
思路整理 有一个按钮可以触发以下逻辑: 将生成的文本自动复制到剪切板上 结果要有友好提示 复制成功后可以粘贴到任何地方 一开始我以为有通用的接口,一番调研之后发现有以下几种东东: document.execCommand("copy")这个用于在要复制的文本处于被选中状态时使用 window.clipboardData.setData("Text", clipBoardContent)为挂载在window上的API 据说兼容性不好 结合ZeroClipboard.js这个插件实现兼容性比较好的复制粘贴,通过
卡少
2018/05/16
2.3K0
剪贴板操作 Clipboard API 教程
一般来说,脚本不应该改动用户的剪贴板,以免不符合用户的预期。但是,有些时候这样做确实能够带来方便,比如"一键复制"功能,用户点击一下按钮,指定的内容就自动进入剪贴板。
ruanyf
2021/01/21
2.3K0
使用Zero Clipboard实现JS网页代码复制到剪贴板功能,所有浏览器全兼容
前几天,好友让我帮忙增加一个复制二维码链接的功能,虽然说这个功能在很多网站都能看到,但是你会经常看到“此功能不支持该浏览器,请手工复制文本框中内容”,这是因为大都用“window.clipboardData”来实现,但这个函数只有IE和Firefox火狐浏览器支持。
崔文远TroyCui
2019/02/26
1.9K0
【JS】JavaScript复制内容到剪贴板 代码分享
注意到,在 <button> 标签中添加了一个 data-clipboard-target 属性,它的值是需要复制的 <input> 的 id,顾名思义是从整个标签中复制内容。
用户1503405
2021/10/08
3K0
Clipboard.js实现复制[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/154538.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/06
1.8K0
vue + element-ui + vue-clipboard2 实现文字复制粘贴功能与提示
GoodTime
2023/10/31
6490
JS 实现复制粘贴功能
接下来,介绍他的使用方式,前提条件,下载clipboard.min.js插件,下载地址:在这里
White feathe
2021/12/08
4.9K0
JS 实现复制粘贴功能
Vue使用Clipboard实现复制功能
不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,如果在函数内再New那么可能会出现点击复制按钮两次,才复制成功的现象,如下:
Javanx
2019/09/04
1.5K0
clipboard.js-master点击复制到系统剪切板适合移动及PC端
Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.
JaneYork
2023/10/11
2630
开源一款剪贴板跨设备共享工具
昨天遇到了一个很棘手的问题:我的手机剪贴板需要同步到另外的两台设备上。遗憾的是手机上并没有安装相同的通讯软件。用网上免费的剪贴板共享工具吧,方便是方便,但是觉得还是不安全,关键是不能实现特定的需求。我很享受DIY的过程,于是思索一下,我觉得我可以自己做出来,还能做到局域网下的剪贴板跨设备共享,毕竟我也曾有过成功的案例:开源一个局域网文件共享工具。于是说干就干。
shigen
2024/03/31
3140
原来 Clipboard 还能复制图像?原理是什么
在写了 这个 29.7 K 的剪贴板 JS 库有点东西! 这篇文章之后,收到了小伙伴提的两个问题:
若川
2021/01/28
2.5K0
原来 Clipboard 还能复制图像?原理是什么
10个关于 Vue 的高级开发技巧
今天,我为你带来了一个系列精选的知识,以帮助你更快地构建 Vue 应用程序,同时,使它们更高效、更易于大规模管理。
前端达人
2021/07/16
6.2K0
Vue 3 自定义事件
除了系统自带的原生 DOM 自带的事件之外,有时候我们需要用到这些自带的事件之外,我们就必须要自定义事件了。
公众号---人生代码
2020/11/03
1.4K0
Vue 3 自定义事件
使用Vue开发Chrome插件
我当时学习开发 Chrome 插件的时候,还不会 Vue,更别说 Webpack 了,所以使用的都是原生的 html 开发,效率就不提了,而这次就准备使用 vue-cli 来进行编写一个某 B 站获取视频信息,评论的功能(原本是打算做自动回复的),顺便巩固下 chrome 开发(快一年没碰脚本类相关技术了),顺便写套模板供自己后续编写 Chrome 插件做铺垫。
愧怍
2022/12/27
3.6K0
使用Vue开发Chrome插件
Vue【你知道吗?】
beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。 destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
IT茂茂
2020/04/30
5.3K0
Vue【你知道吗?】
Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)
https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
Zero-Zhang
2020/12/16
1.1K0
Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)
相关推荐
JavaScript 剪贴板 Clipboard 的那些事儿!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验