vue 复制文本到剪切板

最新推荐文章于 2024-04-29 10:42:46 发布

～Serendipity～

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量191

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ZMJ_QQ/article/details/136659332

版权

实现方法

import { useI18n } from '@/hooks/web/useI18n'
import { VMessage } from '@/components/VuetifyDialog/modules/VMessageModule'

const { t } = useI18n()

export const copyClipboard = async (text: string, content?: object) => {
  console.log('useCopyUtils')
  const copyText = (text) => {
    try {
      const textArea = document.createElement('textarea')
      textArea.value = text
      // 使text area不在viewport，同时设置不可见
      if (content && content.parentNode) {
        content.parentNode.insertBefore(textArea, content)
      } else {
        document.body.appendChild(textArea)
      }
      textArea.focus()
      textArea.select()

      document.execCommand('copy')
      // 执行命令并删除文本
      textArea.remove()
      VMessage.success(t('setting.copySuccess'))
    } catch (error) {
      console.log(error)
      VMessage.error(t('setting.copyFailed'))
    }
  }
  await navigator!.clipboard
    .writeText(text)
    .then(() => {
      VMessage.success(t('setting.copySuccess'))
    })
    .catch((error) => {
      console.log(error)
      copyText(text)
    })
}