几款常用的复制到剪贴板插件

Vue2

v-clipboard

包引入

npm i v-clipboard --save

main.js 全局引入

import Clipboard from 'v-clipboard'
Vue.use(Clipboard)

页面使用

<template>
    ...
    <a-button 
        v-clipboard.copy=”copy“ 
        v-clipboard:success="successCopy"
        v-clipboard:error="errorCopy">
    >复制</a-button>
    ...
</template>

<script>
    export default {
        methods: {
            copy({ value, event }) {
                // 复制的内容
               console.log(value) 
            },
            successCopy({ value, event }) {
                // 复制成功后的回调
                console.log(value)
            },
            errorCopy({ value, event }){
                // 复制失败后的回调
                console.log(value)
            }
        }
    }
</script>

react

react-copy-to-clipboard

包引入 react-copy-to-clipboard

npm install --save react-copy-to-clipboard

import {CopyToClipboard} from 'react-copy-to-clipboard';

const App = () => {
    return (
        <>
            <CopyToClipboard
                text='复制内容'
                onCopy={() => console.log('复制成功')}
            >
                <span>复制</span>
            </CopyToClipboard>
        </>
    )
}

兼容 Vue 和 react （推荐）

copy-to-clipboard

包引入

npm install copy-to-clipboard --save

页面使用

<template>
    <a-button @click="handleCopy('复制的内容')">复制</a-button>
</template>

<scirpt setup>
    import copy from 'copy-to-clipboard'
    const handleCopy = (e) => {
        // 复制的内容
        copy(e, {
            // 是否在控制台显示
            debug: false,
            // 提示消息
            message: '复制成功',
            // 复制后的回调
            onCopy: () => {}
        })
        console.log(e)
    }
</scirpt>

原生js 实现复制功能

// 复制按钮
const copyText = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
  } catch (e) {
    throw new Error("复制失败！")
  }
}