Vue中使用原生Js实现复制到剪切板功能

一、原生js实现方式

此方法是用来对请求后数据处理并复制到剪切板的一个基本功能。

		async copyCookie(uid){
          const{data:res} = await this.$http.get(`/lottery/copyCookie/${uid}`)
          if(res.status!==200) return this.$message.error(res.msg)
          this.handleCopyContent(res.data) // 调用方法复制到剪切版
          this.$message.success(res.msg)
        },
        handleCopyContent (content) {
          const input = document.createElement('input') // 创建input对象
          input.value = content // 设置复制内容
          document.body.appendChild(input) // 添加临时实例
          input.select() // 选择实例内容
          document.execCommand('Copy') // 执行复制
          document.body.removeChild(input) // 删除临时实例
        },

二、Vue插件方式实现

1. 安装vue-clipboard2插件

npm install --save vue-clipboard2

2. main.js引入

import VueClipboards from 'vue-clipboard2'
Vue.use(VueClipboards);

3.例子①

<el-button
    type="text"
    class="awardRecord"
    v-clipboard:copy="awardRecord.cookie"
    v-clipboard:success="onCopy"
    v-clipboard:error="onError">复制</el-button>

// 复制时，通过v-clipboard:copy 指定需要复制的内容：

// 成功or失败方法
onCopy: function (e) {
  alert('复制成功！')
},
onError: function (e) {
  alert('复制失败！')

例子②

// 点击事件
copyCookie() {
  this.$copyText(this.awardRecord.cookie).then(function (e) {
    alert('复制成功')
  }, function (e) {
    alert('复制失败')
  })
},