vue实现复制文本

news/2024/7/23 16:25:57 标签: 前端, javascript, vue.js

方法一:

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

javascript">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这些标签。

javascript">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.niftyadmin.cn/n/1756051.html

相关文章

AI怎么写诗

在开启人类和机器交互的大门一角的时切&#xff0c;AI(人工智能)技术以其惊人的进步速度&#xff0c;被广泛引用到各领域中&#xff0c;从自动驾驶汽车、人脸识别到在棋盘上挑战人类的世界冠军&#xff0c;AI已让我们意识到了它的巨大潜力。然而&#xff0c;人工智能是否能涉足…

使用QT: ActiveX控件生成文件,实现在QT项目中调用.c文件

以连接的其他控件为例&#xff0c;控件的位数&#xff08;32/64&#xff09;&#xff0c;需要和QT编译器保持一致 我在此处连接的是.h和.c文件的类接口&#xff0c;在QT中使用 原始接口&#xff1a; 1.在QT程序中添加模块 QT axcontainer2.查看COM控件的UUID 打开一个.ui文件…

Linux删除指定日期之前的文件

删除指定日期之前的文件&#xff0c; 首先&#xff0c;创建一个基准时间文件touch -t 202301010000,然后查看日期是否正确ll --time-stylelong-iso time_file&#xff0c;最后执行删除命令find . ! -newer time_file | xargs rm。 如下所示&#xff1a; touch -t 2023010100…

【C++11】{}列表初始化,左右值,万能引用

目录 1.{}列表初始化 2.左右值 2.1左值 2.2右值 1.纯右值(prvalue) 2.将亡值(xvalue) 3.生命周期的延长 &#xff08;1&#xff09;无生命周期延长 &#xff08;2&#xff09;有生命周期延长 4.万能引用 万能引用 1.{}列表初始化 在C98中&#xff0c;只允许使用…

hyperf 学习 四、控制器

文档地址&#xff1a;Hyperf 结合之前文章&#xff0c;路由和获取请求不再说明。 一、避免携程间数据混淆 根据文档&#xff1a; Hyperf 内绝大部分的对象包括 Controller 都是以 单例(Singleton) 形式存在。 编写代码时请务必注意 不要 将单个请求相关的数据储存在类属性…

Shell脚本实现Mysql持续kill功能

背景&#xff1a; 最近业务因为db高负载引发了一起故障&#xff0c;原因是因为大量的持续慢查询导致db被打死&#xff0c;之前有在腾讯云平台侧配置持续kill大于5秒的语句&#xff0c;但是出现故障后发现平台支持的粒度最大只到5秒100条&#xff0c;所以这里想通过Shell脚本来实…

Splunk 证书appsLicenseCA.pem 过期是否有影响

1: 背景 appsLicenseCA.pem 证书过期了&#xff0c;Splunk version: 8.2.X 2: 查找文档&#xff1a; Splunk 官网没有找到&#xff0c;可能是Splunk 下线了类似的文档&#xff0c;现在Splunk 已经到9.x.x. 3: 结论&#xff1a; 这个证书过期没有影响&#xff0c;如果升级到…

王道考研计算机网络第五章知识点汇总

5.1.1 传输层概述 复用&#xff1a;好比家里面每个人都要写信&#xff0c;向信箱里面投入信件&#xff0c;然后由邮递员取走。 分用&#xff1a;就是每个人都收到了各自的回信&#xff0c;然后从信箱中取走各自的信 5.2 UDP协议 注意&#xff1a;用户数据报和检验和都是指的整…