Vue 点击复制(copy)功能【JS原生】

zlting~

已于 2023-05-10 10:40:22 修改

阅读量2.6k

点赞数

分类专栏： VUE 文章标签：复制

于 2021-02-25 16:00:34 首次发布

本文链接：https://blog.csdn.net/sunshineTing2/article/details/114027695

版权

VUE 专栏收录该内容

114 篇文章 15 订阅

订阅专栏

在这里插入图片描述

<p id="txt">http://xxx.com</p>
<el-button :type="successCopy ? 'success': 'primary'" @click="copyLink">
	<span>复制</span>
	<i v-if="successCopy" class="el-icon-circle-check"></i>
</el-button>

select()方法只对 input 和 textarea 有效，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板

// 复制
copyLink(shortLink) {
  var txt= document.getElementById('txt').innerText; // 获取文本
  let textarea = document.createElement("textarea"); // 创建textarea文本框
  textarea.value = txt;
  textarea.readOnly = "readOnly";
  document.body.appendChild(textarea); // 追加元素
  textarea.select() // 选中文本内容
  let result = document.execCommand("copy"); // 执行浏览器复制命令
  if (result) {
    this.successCopy = true;
  }
  textarea.remove();
},