前言
在前端开发中,有时候需要对内容比如订单编号,货物编号进行复制处理业务,但是编码有比较长,手动一个个的录入不仅费时还容易录入错误,这时的一键复制功能就显的很方便。
查阅相关资料得知,js有个方法是可以实现复制功能的
document.execCommand('copy') //拷贝/复制
document.execCommand('cut') //剪切
document.execCommand('paste') //粘贴
execCommand的兼容性
页面
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一键复制</title>
</head>
<body>
<input type="text" id="input" value="Hello World">
<button>一键复制</button>
<script>
var button = document.querySelector('button');
button.addEventListener('click', function () {
var input = document.querySelector('input');
var value = input.value;
input.select();
copyToClipboard(value);
alert('已复制到剪贴板');
});
function copyToClipboard(text) {
document.execCommand('copy');
}
</script>
</body>
</html>
通过下载clipboard.js 库实现
npm install clipboard --save
在组件中使用
import Clipboard from 'clipboard'
<template>
<div>
<input id='input' :value='val'>
<button @click="copy"> copy</button>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Clipboard from 'clipboard'
const val = ref('hello world')
const copy (res=val.value){
let clipboard = new Clipboard("#input",{
text: function() {
return res
}})
//复制成功
clipboard.on('success',()=>{
alert('复制成功')
clipboard.destroy(); //清理 Clipboard.js 所创建的事件和对象
})
}
</script>
或者引入CDN 引入
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>