当先锋百科网

首页 1 2 3 4 5 6 7

安装插件:npm install clipboard --save

引入:import Clipboard from 'clipboard'

我是封装到一个公共的js里面,代码如下:

import Clipboard from 'clipboard' // 复制粘贴插件
// 复制粘贴 content:要复制的内容,clickEvent:点击事件,successMsg:成功的提示,errorMsg失败的提示
export function copyToClipboard (content, clickEvent, successMsg, errorMsg) {
  // clickEvent.target=填写上面点击事件绑定的class名
  const clipboard = new Clipboard(clickEvent.target, {
    text: () => content
  })
  // 成功的函数
  clipboard.on('success', () => {
    ElMessage.success(successMsg)

    clipboard.destroy() // 释放内存
  })
  // 失败的函数
  clipboard.on("error", (e) => {
    ElMessage.error(errorMsg)
    clipboard.destroy() // 释放内存
  })
}

 请务必记得在button按钮里加上data-clipboard-text这个代码

            <el-button
              type="primary"
              class="copysfc-btn"
              :data-clipboard-text="sfcCodeV3"
              @click="copySFC"
              >复制</el-button
            >
const sfcCodeV3 = ref('')
const copySFC = (e: PointerEvent) => {
  copyToClipboard(
    sfcCodeV3.value,
    e,
    i18n.t('designer.hint.copySFCSuccess'),
    i18n.t('designer.hint.copySFCFail')
  )
}