Clipboard 复制插件

未金涛

于 2021-04-10 11:50:35 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端

本文链接：https://blog.youkuaiyun.com/weixin_39753511/article/details/115280297

WEB前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何在Vue应用中使用clipboard.js库来实现一个简单的文本复制按钮，包括安装步骤、代码实现及成功和错误处理。适合开发者快速集成复制功能到项目中。

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

title: Clipboard 复制插件
tags:

Clipboard
copy

Clipboard复制插件

使用说明

安装

npm install clipboard --save

源码

<template>
  <div>
    <!-- Trigger -->
    <button class="btn4" :data-clipboard-text="my_text" @click="copyLink()">
      Copy to clipboard
    </button>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
  name: 'Clipboard',
  data() {
    return {
      my_text: '复制的文本3334444'
    }
  },
  methods: {
    copyLink() {
      var clipboard = new Clipboard('.btn4')

      // 成功
      clipboard.on('success', function(e) {
        // console.info('Action:', e.action)
        // console.info('Text:', e.text)
        // console.info('Trigger:', e.trigger)

        e.clearSelection()
        // 释放内存
        clipboard.destroy()
      })
      // 失败
      clipboard.on('error', function(e) {
        console.error('Action:', e.action)
        console.error('Trigger:', e.trigger)
        clipboard.destroy()
      })
    }
  }
}
</script>