vue 项目使用 clipboard复制粘贴板插件

一、clipboard.js的作用：拷贝文字

clipboard.js 现代化的拷贝文字，不依赖 flash, 不依赖其他框架，gzip 压缩后只有 3kb 大小.

二、2种安装方式：

1. npm安装

npm install clipboard --save

2. cdn引入

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

三、使用

点击事件触发；@click="copyEvent"

:data-clipboard-text="logTailValue" ；logTailValue放复制的内容

data-clipboard-action 属性来指明你想要复制还是剪切内容;值有：copy，cut;

logTailValue 是要复制的值；值接收的是字符串类型；使用JSON.stringify（）转类型；

<div id="con_c"></div>
<div id="copys" alt="" @click="copyEvent"  :data-clipboard-text="logTailValue" data-clipboard-action="copy" data-clipboard-target="#con_c">
    

四、使用方法

methods：{  
copyEvent() {
      var clipboard = new Clipboard('#copys')
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message.warning('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
}

npm地址：www.npmjs.com/package/cli…