vue 简单好用的复制方法 Clipboard.writeText

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量389 收藏 1
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73267676/article/details/132322157
版权

Clipboard 接口的 writeText()  方法可以写入特定字符串到操作系统的剪切板。会返回一个Promise ，一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪贴板。

无需插件 兼容性好 只能复制字符串 集合类型会显示[object,object],需要JSON.stringify一下

// newData => 需要复制的文本 
navigator.clipboard.writeText(newData).then(() => {
        //复制成功后执行的逻辑
          this.$message.success('复制成功')
        })
三乌e
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
clipboard.js在移动端复制失败的解决方法
10-18
最近在使用clipboard.js碰到的一个小问题，通过查找相关资料解决了，所以下面这篇文章主要给大家介绍了关于clipboard.js在移动端复制失败的解决方法，需要的朋友可以参考借鉴，下面来一起学习学习吧
vue 实现点击复制文本到剪贴板
weixin_45606890的博客
01-03 639
复制
js复制文本到粘贴板（Clipboard.writeText()）
★【World Of Moshow 郑锴】★
11-14 5598
前言 js如何复制文本到粘贴板呢，网上所说的各种复制。。在Chrome都没用。 网上的代码 基本思路是通过 window.clipboardData.setData('Text',textVal)这个 对象来操作的。可是都不work。 /** * 复制代码 */ $('#btnCopy').bind('click', function (e) { if (!$.isEmptyObject...
vue实现点击复制文本功能--Clipboard.js
star星辉的博客
07-29 512
vue实现点击复制指定区域的文字，推荐使用Clipboard.js，Clipboard.js是一个轻量级的插件，它不依懒于Flash和多余的框架。 安装clipboard.js npm install clipboard --save 引入clipboard.js，封装点击复制的方法 封装函数代码 import Vue from 'vue' import Clipboard from...
js 通过 navigator.clipboard.writeText(textToCopy) 实现复制，测试环境可以，正式环境不行的解决方案。
众纳百川的博客
12-09 9430
测试环境下可以正常复制 ，但放到线上会报错：找不到 .writeText。在 Chrome 的 DevTools 控制台下执行。layer.msg("复制成功");layer.msg("复制失败");安全域包括本地访问与开启TLS安全认证的地址，如。，经查找资料发现是浏览器禁用了非安全域的。对象，哪些地址是安全的呢？
clipboard.js复制文本到剪切板
托妞专栏
03-07 440
<a title="复制链接地址" id="copyId" data-clipboard-text="${siteUrl}/subject/view.jhtml?id=${subject.id}" ></a><script type="text/javascript" src="/js/clipboard.min.js">
Vue 使用clipboard复制文本信息
S筱潇S四维Smile
06-27 626
1、安装clipboard npm install clipboard --save 2、引入clipboard （1）全局引入，在main.js引入 import clipboard from 'clipboard'; //注册到vue原型上 Vue.prototype.clipboard = clipboard; （2）在某个组件中使用时引用 import Clipboard...
clipboard.min.js 实现复制图文信息，（vue 里面可以使用）
06-14
clipboard.min.js 实现复制图文信息，（vue 里面可以使用） 博客链接：https://blog.csdn.net/qq_40591925/article/details/125282512?spm=1001.2014.3001.5502
vue3-clipboard:for Vue 3的剪贴板.js绑定
04-28
import { VueClipboard } from '@soerenmartius/vue3-clipboard' createApp ( App ) . use ( VueClipboard ) . mount ( '#app' ) 导入特定组件的v-clipboard指令 例子 将v-clipboard指令应用于元素 < input v -...
在vue使用clipboard.js进行一键复制文本的实现示例
10-17
主要介绍了在vue使用clipboard.js进行一键复制文本的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端（Vue使用clipboard）文字复制功能
qq_52912134的博客
11-25 719
Vue 使用clipboard。
vue 复制，writeText被禁用 undefined
qq_17859117的博客
12-20 821
注意 navigator.clipboard.writeText可能会被浏览器禁用，还是需要使用兼容的 document.execCommand('copy')
Clipboard 剪贴板学习笔记
黄彪博客
01-05 1567
Clipboard.read()方法用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片）。由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。ClipboardItem 接口是对剪切板里的内容的抽象，比如我们选中网页上的一段文字，并右击选择复制，Clipboard.write()方法用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。用户使用剪贴板数据，进行粘贴操作时，会触发paste事件。
【JS】剪切板操作（手写复制、粘贴功能）
热门推荐
qq_45677671的博客
12-20 1万+
文章目录Document.execCommand() 方法Clipboard 对象介绍Clipboard 对象方法 浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。 一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如"一键复制"功能，用户点击一下按钮，指定的内容就自动进入剪贴板。 目前，一共有三种方法可以实现剪贴板操作。 1. Document.execCommand()方法 2. 异步的 Clipboard API 3. c
vue复制指定字符串
随便写写...
08-12 648
vue复制指定字符串
vue复制文本方法
weixin_44927143的博客
10-22 534
//js原生 async copyJSON(text) { let target = document.createElement('input') //创建input节点 target.value = text // 给input的value赋值 document.body.appendChild(target) // 向页面插入input节点 target.select() // 选中input
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 669
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1108
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue + ts 复制到剪切板
01-07
在Vue和TypeScript中实现复制到剪贴板的功能可以使用Clipboard API。以下是一个示例代码： ```vue <template> <div> <button @click="copyToClipboard">复制文本</button> </div> </template> <script> export default { methods: { copyToClipboard() { const textToCopy = "要复制的文本"; navigator.clipboard.writeText(textToCopy) .then(() => { console.log("文本已成功复制到剪贴板"); }) .catch((error) => { console.error("复制文本到剪贴板失败:", error); }); } } } </script> ``` 在上面的代码中，我们在按钮的点击事件中调用了`copyToClipboard`方法。该方法使用`navigator.clipboard.writeText`函数将指定的文本写入剪贴板。如果复制成功，控制台将输出"文本已成功复制到剪贴板"；如果复制失败，控制台将输出错误信息。 请注意，为了使用Clipboard API，你的浏览器必须支持该API。目前，大多数现代浏览器都已经支持了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值