vue/js实现点击按钮复制的功能

最新推荐文章于 2024-07-05 17:16:03 发布

笑到世界都狼狈

最新推荐文章于 2024-07-05 17:16:03 发布

阅读量1.8k

点赞数

分类专栏： vue.js 文章标签： js实现点击复制功能 vue实现点击复制功能点击按钮复制某个字段点击复制功能

原文链接：https://blog.csdn.net/dreamboycs/article/details/105817132

版权

vue.js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

这篇博客分享了在Vue和JavaScript中实现复制功能的两种方法。在Vue中，通过监听点击事件和使用`document.execCommand('Copy')`来实现在表格中复制特定列信息的功能。而在纯JavaScript中，创建隐藏输入元素，选中内容并执行复制命令，实现了复制页面上指定文本的逻辑。提供了完整的代码示例和操作步骤。

摘要由CSDN通过智能技术生成

项目预研中，有一个点击复制按钮，实现复制的功能，百度找到了复制的方法，蛮好用的，就收藏起来，方便以后用到的时候可以直接可查看

1.vue写法，我是写在element-ui的表格中的，在表格行中点击复制按钮，复制表格中的某一列信息

代码结果如下：

主要代码：

{ label: '复制', click: this.handleCopy },

// 复制
handleCopy(row) {
  console.log('row', JSON.parse(JSON.stringify(row)))
  this.copyData = row.docId
  this.copy(this.copyData)
},
copy(data) {
  const url = data;
  const oInput = document.createElement('input');
  oInput.value = url;
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象;
  console.log(oInput.value)
  document.execCommand('Copy'); // 执行浏览器复制命令
  this.$message({
    message: '复制成功',
    type: 'success'
  });
  oInput.remove()
},

参考地址

2.也找到了js的方法，一起做了一下统一整理

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="copyContent">你好，我是被你复制的内容</div>
<button id="handleCopy">复制</button>
<script type="text/javascript">
    function copy() {
        var val = document.getElementById('copyContent');
        window.getSelection().selectAllChildren(val);
        document.execCommand("Copy");
        alert("复制成功");
    }
    var clickCopy = document.getElementById("handleCopy");
    clickCopy.onclick = function() {
        copy()
    }
</script>
</body>
</html>