vue复制

# 复制剪切板

# 工具类复制

/**
 * 复制内容到粘贴板
 * content : 需要复制的内容
 * callback : 回调函数
 */
export const copyToClip = function (content, callback) {
  var aux = document.createElement('input')
  aux.setAttribute('value', content)
  document.body.appendChild(aux)
  aux.select()
  document.execCommand('copy')
  document.body.removeChild(aux)
  callback()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用

// 复制链接
copyLink (item) {
  // 复制剪切板
  copyToClip(item.shareUrl, () => {
    this.$message({
      message: '复制成功',
      type: 'success'
    })
  })
},

1
2
3
4
5
6
7
8
9
10

# 使用插件 clipboard

1.安装依赖 npm install clipboard --save
2.使用

<span
  data-clipboard-action="copy"
  class="copyLink"
  :data-clipboard-text="orderData"
  @click="copyLink"
  >{{ orderData }}</span
>

1
2
3
4
5
6
7

import ClipboardJS from 'clipboard';
copyLink() {
  const clipboard = new ClipboardJS('.copyLink');
  clipboard.on('success', () => {
    console.log('my console复制成功 : ');
  });
  clipboard.on('error', () => {
    console.log('my console复制失败 : ');
  });
},

1
2
3
4
5
6
7
8
9
10

3.注意点如果DOM事件为循环

:id="copyLink${scope.row.id}" 需要把new ClipboardJS里面的DOM改为变量拼接 new ClipboardJS(#copyLink${id});

clipboard改为vue变量

copyLink (id) {
  // 处理多个点击事件触发问题 因为每次进页面的时候都会new一个Clipboard, 所以每次都会多new出一个
  if (this.clipboard) {
    this.clipboard.destroy()
  }
  this.clipboard = new ClipboardJS(`#copyLink${id}`)
  this.clipboard.on('success', () => {
    this.$message({
      message: '复制成功',
      type: 'success'
    })
  })
  this.clipboard.on('error', () => {
    console.log('my console复制失败 : ')
  })
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

更新时间: 3/22/2021, 4:43:19 PM

← vue echarts图表 vue 原理汇总→