vue实现复制文本

news2024/10/6 22:24:49

方法一:

原理:浏览器本身提供了一个copy命令,利用它可以复制选中的内容:如果是输入框,我们可以利用select()方法来选中输入框中的内容,然后调用copy命令,将文本复制到剪切板,但是select()方法只对<input>和<textarea>有效,对于其他标签就不太好使了。

function btnCopyClick(){
    // const oInp{ut = this.$refs.copyInput[0] // 无效
    // const oInput = document.getElementById('copyInput') //无效
    const oInput = document.createElement('input')
    // 这边为链接地址this.liveLink='www.baidu.com'
    oInput.value = text
    document.body.appendChild(oInput)
    oInput.select()
    console.log(oInput.value)
    document.execCommand('Copy')
    oInput.remove()
}

这里有必要记录一下,在纯html当中通过getElementById api获取dom元素是没有问题的,但在vue中这样获取dom元素会导致复制失效,使用this.$refs也一样会失效。

此外必须要将创建的input标签appenchild到body中才生效。

方法二:

原理:利用游览器的navigator.clipboard api 实现复制功能,这个api优势是不依赖input/textare这些标签。

navigator.clipboard
    .writeText(text)
    .then(() => {
        this.copyText = '复制成功'
        setTimeout(() => {
            this.copyText = '复制'
        }, 1000)
    })
    .catch((error) => {
        console.error('复制失败:', error)
    })

也同样有注意点:我用的edge游览器如果本地项目的地址不是localhost,由于游览器的安全策略就会报navigator.clipboard = undefined

 

方法三:

原理:利用window.getSelection().selectAllChildren(element),它会选中元素的所有字节点进行复制,江湖传说利用这个api可以实现复制图片,但我没能实现,有大佬看到的话可以指教指教,下面是代码:
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <div>
        <span id="copyMy">kjahdskjfha</span>
        <button onClick="copyFn()">点击复制</button>
    </div>

<script>


    function copyFn(){
        var val = document.getElementById('copyMy');
        window.getSelection().selectAllChildren(val);
        document.execCommand ("Copy");
    }

</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/716477.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

菱形继承及菱形虚拟继承

复杂的菱形继及菱形虚拟继承 单继承&#xff1a;一个子类只有一个直接父类时称这个继承关系为单继承 多继承&#xff1a;一个子类有两个或以上直接父类时称这个继承关系为多继承 菱形继承是多继承的一种特殊状态 菱形继承的问题&#xff1a;从下面的对象成员模型构造&#xff…

【Linux】指令与权限

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 一、Xshell配置 会话配置 日志 二、指令 date指令 cal指令 find指令(极其重要) -name grep指令…

【python pip 安装错误 ModuleNotFoundError: No module named pip._internal 解决办法】

&#x1f680; 零基础入门学习Python&#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜…

【OpenGL】读取视频并渲染

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍读取视频并渲染。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&#…

数据中心动环监控系统分析与应用

摘要&#xff1a;介绍了数据中心动环监控系统&#xff0c;并结合原理图详细分析。本系统主要对数据中心的电源设备和环境参数 进行监控&#xff0c;如 UPS、蓄电池、配电柜、温湿度、漏水监测等&#xff0c;将实现多机房、微模块远程联网集中监管&#xff0c; 从而为提高数据中…

Redis 三种模式-------主从复制、哨兵及集群

目录 一、主从复制1.1 主从复制的概念1.2 主从复制的作用1.3 redis 主从复制流程1.4 搭建Redis 主从复制1、 环境准备2、 安装Redis3、 修改redis配置文件&#xff08;master节点配置&#xff09;4、 修改redis配置文件&#xff08;slave节点操作&#xff09;5、 验证主从效果 …

7.1.3 Linux的EXT2文件系统(inode)

inode 的内容在记录文件的权限与相关属性&#xff0c;至于 block 区块则是在记录文件的实际内容。 而且文件系统一开始就将 inode 与 block 规划好了&#xff0c;除非重新格式化&#xff08;或者利用 resize2fs 等指令变更文件系统大小&#xff09;&#xff0c;否则 inode 与 b…

JAVA开发(JAVA视频监控接口相关)

一、背景 最近在做视频监控接口相关的开发&#xff0c;需要调用视频的接口获取直播地址&#xff0c;回放地址&#xff0c;然后集成到web里查看。 二、涉及的接口 1、获取卡口的id 2、通过卡口id获取通道&#xff08;设备的id&#xff09; 3、通过设备的id获取到直播地址 4…

阿拉德之怒手游架设教程

阿拉德之怒是一款大型多人在线角色扮演游戏&#xff08;MMORPG&#xff09;&#xff0c;在全球范围内拥有庞大的玩家群体。该游戏以其精美的画面、丰富多样的职业和任务系统而闻名&#xff0c;让玩家可以沉浸在一个充满冒险和挑战的奇幻世界中。对许多玩家而言&#xff0c;阿拉…

vue有意思的图片动画插件direction-reveal

功能&#xff1a;操作简单好上头&#xff0c;动画特效很丝滑&#xff0c;有很多种供选择 1.下载插件 npm install direction-reveal --save-dev 2.使用 导入到需要使用动画的单页面 import DirectionReveal from direction-reveal; 使用样式 mounted() {this.query();},m…

【深度学习笔记】浅层神经网络

本专栏是网易云课堂人工智能课程《神经网络与深度学习》的学习笔记&#xff0c;视频由网易云课堂与 deeplearning.ai 联合出品&#xff0c;主讲人是吴恩达 Andrew Ng 教授。感兴趣的网友可以观看网易云课堂的视频进行深入学习&#xff0c;视频的链接如下&#xff1a; https://m…

GoLand live template自定义模板失效问题解决

目录 问题背景原因分析问题解决 问题背景 我希望在goland自定义一个注解模板&#xff0c;输入/**Enter可以补全如下图所示 /** * description TODO * param null * return * author user * date 2023/7/4 15:24*/ func main() {print("hello world\n") }于是我在Fi…

Vue指令案例

案例需求&#xff1a; 将Vue数据模型中的数据以表格的形式渲染展示 具体代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-wid…

1、CCeisum简介

CCesium是c版本的cesium桌面端程序&#xff0c;底层基于opengl实现的c框架&#xff0c;本质上依赖于opengl的api进行渲染。与web端cesium基本一致&#xff0c;只需简单的几行代码即可实现桌面端的三维地图&#xff0c;通过api接口实现三维地图的基本功能&#xff0c;初始化地图…

看流动的电流,Livewire电路仿真动态演示!

Livewire是一个模拟电子实验室&#xff0c;它使用动画和声音来演示电子电路的原理。开关&#xff0c;晶体管&#xff0c;二极管&#xff0c;集成电路和其他数百个组件都可以连接在一起&#xff0c;以研究隐藏的概念&#xff0c;例如电压&#xff0c;电流和电荷。可以设计的电路…

使用myCobot 280 Jeston Nano进行物体精确识别追踪

前言 我们在YouTube上看到有人使用机械臂实现物体跟踪功能的视频时&#xff0c;深受启发&#xff0c;对这个项目产生了浓厚的兴趣&#xff0c;并决定独立开发一个类似的程序。 我们的目标是开发一个能够准确识别和跟踪物体的机械臂系统&#xff0c;以便在实际应用中发挥作用&a…

SpringBoot 整合Redis 实战篇

一、解决数据乱码问题&#x1f349; 在上篇文章中我们整合了redis&#xff0c;当我们存入一个对象时会发现redis中的数据存在乱码问题&#xff0c;这是jdk编码的问题 springboot整合redis时提供了两个模板工具类&#xff0c;StringRedisTemplate和RedisTemplate. 1.使用Red…

Vue指令--v-if、v-show、v-for

目录 v-if和v-show指令的展示如下&#xff1a; v-for指令的展示如下&#xff1a; v-if和v-show指令的展示如下&#xff1a; v-if指令具有两个配套的指令v-else-if和v-else进行条件判断来决定是否渲染展示某元素 具体代码展示如下&#xff1a;&#xff08;代码中的注释值得一…

音视频入门知识学习

音视频入门知识学习 视频相关视频压缩空间冗余时间冗余视觉冗余信息熵冗余知识冗余 I帧 P帧 B帧 压缩思路I帧P帧B帧 H.264VCLNALNAL&#xff08;片&#xff08;宏块&#xff09;&#xff09; 音频概念采样和采样频率采样位数声道码率声音与音频数字音频相关特点时域冗余频域冗余…

Redis高可用——哨兵模式

Redis——哨兵模式 一、Redis 哨兵模式1.哨兵模式的作用2.故障转移机制3.主节点的选举 二、搭建Redis 哨兵模式1.修改 Redis 哨兵模式的配置文件&#xff08;所有节点操作&#xff09;2.启动哨兵模式3.查看哨兵信息4.故障模拟5.验证结果 一、Redis 哨兵模式 主从切换技术的方法…