js中的一键复制功能

文章目录

前言

在前端开发中，有时候需要对内容比如订单编号，货物编号进行复制处理业务，但是编码有比较长，手动一个个的录入不仅费时还容易录入错误，这时的一键复制功能就显的很方便。

查阅相关资料得知，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/[email protected]/dist/clipboard.min.js"></script>