Vue项目使用clipboard.js实现文字复制,剪切功能

Vue项目使用clipboard.js实现文字复制,剪切功能

clipboard.js是一个不依赖flash或者其他框架，将文本复制到剪贴板的插件，不需要过多繁杂的配置或者下载很多脚本文件.

安装：

在vue项目中通过npm工具安装

npm install clipboard --save

在需要使用的组件中引入

import Clipboard from 'clipboard'

Html：

<div>
    <span>{
    
    {
    
     itemID }}</span>
    <button class="btn" @click="copyFid()" :data-clipboard-text = "itemID">复制</button>
</div>

Script：

data() {
    
    
   return {
    
    
     //需要复制的信息
     itemIDm: 123456,
   }
},

data-clipboard-text：该属性指定需要复制的内容

Html：

<div>
    <input id=”inp”>
    <button class="btn" @click="copyFid()" data-clipboard-target="#inp" data-clipboard-action=“cut”></button>
 </div>

data-clipboard-target：该属性指定复制内容的元素
data-clipboard-action：该属性指定要复制内容（copy），还是剪切内容（cut）,默认为复制, cut 操作只在 input 或者 textarea 元素上生效

Methods中创建复制方法

copyFid() {
    
    
  	//实例化clipboard插件实例
    let clipboard = new Clipboard('.btn')
	//成功的回调
  	clipboard.on('success', () => {
    
    
      this.$message({
    
    
        message: '已复制到粘贴板',
        type: 'success'
      })
      clipboard.destroy();// 销毁复制缓存,避免出现复制之前复制的内容
    });
  	//失败的回调
   	clipboard.on('error', () => {
    
    
      this.$message.error('复制失败')
    });
 },