js实现复制功能

雨中的风铃子

于 2021-07-20 11:45:32 发布

阅读量2.7k

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_38990451/article/details/118931551

版权

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在前端开发中实现文本复制到剪贴板的两种常见方法：1) 通过选中元素执行浏览器复制命令；2) 创建隐藏input元素，设置其值为待复制内容，然后执行复制。这两种方法都利用了`document.execCommand('Copy')`来完成复制操作，并在成功后显示提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下方会介绍两种方式：
1、选中复制
2、点击复制

选中复制

<template>
	<el-button type="primary" plain @click="onCopy">复制</el-button>
</template>

<script>
export default {
  methods:{
    onCopy(){
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      }
  }
}
</script>

点击复制

<template>
	<el-button type="primary" plain @click="onCopy">复制</el-button>
</template>

<script>
export default {
  methods:{
    onCopy(){
       const url = '我是要被复制的内容'
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      })
      oInput.remove()
  }
}
</script>