vue 实现点击复制文本

Posted 2023-04-28

参考技术A

1.引入插件 clipboard.js 方法如下：
直接npm安装： npm install clipboard --save

2.在需要使用的组件中important
引用方法： important Clipboard from \'clipboard\'
3.添加需要复制的内容
例如：

4.添加点击后的方法

以上就是给大家实现点击复制的方法 大家项目有需求可以试试

点击按钮复制文本

点击按钮，进行文本复制操作。实现这个功能需要二点；

 一：用window.getSelection().selectAllChildren(“”)获取要复制的内容

 二：用document.execCommand ("Copy");进行复制操作

关键代码

 window.getSelection().selectAllChildren(val);
 document.execCommand ("Copy");

 

HTML

<p id="copyWeChat">要复制的内容</p>

<span onclick="copyFn(‘copyWeChat‘)">复制</span>

 

JS

<script>
            
            function copyFn(id){
            var val = document.getElementById(id);
            window.getSelection().selectAllChildren(val);
            document.execCommand ("Copy");
            alert("复制成功")
            }
        </script>