vue 一键复制功能 jQuary拼接字符串内有点击事件

需求：jQuary拼接的html表格需要一键复制功能

点击事件的实现

1.onClick调用copy方法

//content是拼接的字符串 onClick="copy(this)"是点击复制事件
 content += '<td class="head">' + key + ':</td><td class="info" onClick="copy(this)">' + valKey + '</td>'

2.在钩子函数中加window.copy= this.copy

//从copy.js导入这两个方法，这两个方法的实现在下边
import { selectText, copyText } from "@/utils/copy";

mounted() {
	window.copy= this.copy //很重要，否则copy方法不生效
}
methods: {
    // 复制方法
    copy(text) {
      copyText(selectText(text))
    },
 }

3.新建一个copy.js（除了第一句导入的messageSuccessInfo 方法，其他可以直接用）

//导入messageSuccessInfo方法
import { messageSuccessInfo } from '@/utils/common'

export function selectText(element) {
  return element.innerText
}

export function copyText(text) {
  var textValue = document.createElement('textarea')
  textValue.setAttribute('readonly', 'readonly') // 设置只读属性防止手机上弹出软键盘
  textValue.value = text
  document.body.appendChild(textValue) // 将textarea添加为body子元素
  textValue.select()
  var res = document.execCommand('copy')
  document.body.removeChild(textValue)// 移除DOM元素
  if (text !== '') {
    messageSuccessInfo('复制成功')
  }
  return res
}