Vue 点击复制(copy)功能【JS原生】
<el-button :type="successCopy ? 'success': 'primary'" @click="copyLink('http://xxx.com')"><span>复制</span><i v-if="successCopy" class="el-icon-circle-check"></i></el-bu
·
<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();
},
更多推荐
已为社区贡献25条内容
所有评论(0)