vue2 点击复制相应数据到系统粘贴板

Vue2实现点击复制任务名称到剪贴板

最新推荐文章于 2025-09-02 08:30:00 发布

原创最新推荐文章于 2025-09-02 08:30:00 发布 · 632 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #vue

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue 2应用中实现点击按钮将数据`task_name`复制到系统粘贴板，通过创建临时input元素并使用`document.execCommand`来完成复制功能。

vue2 点击复制相应数据到系统粘贴板

按钮html

<button class="mr10" theme="primary" text @click="copy(props.row)">点击复制</button>

task_name替换为需要复制的内容

  export default {
	methods: {
		copy(row) {
	        // 创建一个input框
	        const input = document.createElement('input')
	        // 将指定的DOM节点添加到body的末尾
	        document.body.appendChild(input)
	        // 设置input框的value值为复制的值
	        const address = row.task_name
	        input.setAttribute('value', address)
	        // 选取文本域中的内容
	        input.select()
	        // copy的意思是拷贝当前选中内容到剪贴板
	        // document.execCommand（）方法操纵可编辑内容区域的元素
	        // 返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
	        if (document.execCommand('copy')) {
	          document.execCommand('copy')
	        }
	        // 删除这个节点
	        document.body.removeChild(input)
	        // 弹窗：复制成功
	        // 
	      },
    }
}