vue复制内容到剪切板

安装

在Vue中将内容复制到剪贴板可以使用clipboard.js库来完成。首先需要安装该库

npm install clipboard --save

封装成类

创建clipboard.js文件 存放路径src/utils/clipboard.js

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() {
  Vue.prototype.$message({
    message: '复制成功',
    type: 'success',
    duration: 1500
  })
}

function clipboardError() {
  Vue.prototype.$message({
    message: '复制失败',
    type: 'error'
  })
}

export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

页面中调用

import clipboard from '@/utils/clipboard'
clipboard(text, event) // text:复制的文字，event:触发事件

使用实例

引入

import clipboard from '@/utils/clipboard'

view视图， 调用 buildSignUrlPDF(scope.row,$event)

<el-tooltip slot="left" class="item" effect="dark" content="复制签名地址" placement="top">
    <el-button  icon="el-icon-share" :disabled="!scope.row.demandnoteUrl || scope.row.parentSignature" type="primary" size="mini" class="opt-item" @click="buildSignUrlPDF(scope.row,$event)"></el-button>
</el-tooltip>

script代码 方法buildSignUrlPDF

// 复制签名地址
    buildSignUrlPDF(row){
      let baseUrl=window.location.origin
      console.log(baseUrl)
      // type: 1未签名2已签名 pay: 1交费2退费
      let resUrl=baseUrl+'/viewAgreement?id='+row.id+'&type=1&pay=1'
      clipboard(resUrl, event)
    }