Vue中配合clipboard.js实现复制功能

最新推荐文章于 2025-06-11 11:41:59 发布

原创最新推荐文章于 2025-06-11 11:41:59 发布 · 723 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue 复制 #clipboard 复制粘贴板

Vue 专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何使用vue-clipboard2插件在Vue项目中实现文本复制功能，包括安装、配置及使用方法，适用于所有主流浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

点击复制按钮，将设置的目标内容复制，可以在电脑上任何地方粘贴
以较小的代码实现该功能，并能兼容所有主流浏览器

插件： clipboard.js

vue相对插件：vue-clipboard2

官网链接地址： https://clipboardjs.com/

vue-clipboard2地址：https://www.npmjs.com/package/vue-clipboard2

vue中使用较方便的方式：

npm i vue-clipboard2 -S 或者 npm install vue-clipboard2 --save

main.js

import VueClipboard from 'vue-clipboard2';

Vue.use(VueClipboard)

Index.vue

<template>
    <button 
        v-clipboard:copy="message"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
    >
        复制
    </button>
    <div v-model="message"></div>
</template>
<script>
    methods: {
        onCopy: function(e) {
             alert(e.text); // e.text复制的文本内容
        },
        onError: function(e) {
            alert('复制失败')
        }
    }
</script>