vue实现文本点击复制

clipboard.js的引入和使用

在平时的开发过程中难免会需要实现 点击复制文本的功能，我们一般是通过clipboard.js去实现

1.引入clipboard.js

• 通过npm安装：npm install clipboard --save
• 通过通过引入源文件：下载地址

<script src="js/clipboard.min.js"></script>

2.在需要使用的组件里import

import Clipboard from 'clipboard'

3.使用和方法

<span class="tag-read" data-clipboard-text="我是点击复制的内容" @click="copy">我是点击复制的内容</span>

copy () {
      var clipboard = new Clipboard('.tag-read')
      clipboard.on('success', e => {
          console.log('复制成功')
          //  释放内存
        clipboard.destroy()
      })
        clipboard.on('error', e =>{
        // 不支持复制
        console.log('该浏览器不支持复制')
        // 释放内存
        clipboard.destroy()
      })
    },

通过点击文本就会将其复制

image.png