Vue 使用clipboard复制文本信息

原创于 2019-06-27 18:42:53 发布 · 770 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍如何利用Clipboard.js库在Vue项目中实现文本复制功能。包括安装Clipboard.js，全局及局部引入，以及在组件中具体使用的方法。通过示例代码展示了如何监听复制成功和失败的事件。

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

1、安装clipboard

npm install clipboard --save

2、引入clipboard

（1）全局引入，在main.js引入

import clipboard from 'clipboard';
//注册到vue原型上
Vue.prototype.clipboard = clipboard;

（2）在某个组件中使用时引用

import Clipboard from 'clipboard';

3、在组件中使用

<template>
     <div data-clipboard-action="copy" class="copy" :data-clipboard-text="12345678" @click="copy">点击复制</div>
</template>

<script>
  import Clipboard from 'clipboard';
  export default {
          data() {
		return {}
          },
          methods:{
            copy() {  
                 let clipboard = new this.clipboard(".copy");
                 clipboard.on('success', function () {
                   console.log("复制成功")
                 });
                 clipboard.on('error', function () {
                   console.log("复制失败")
                 });
             }
        }
    }
</script>