vue3中 实现复制到剪切板功能

1. vue-clipbord3

npm install --save vue-clipboard3

import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()

const url = ref()
await toClipboard(url.value)




const handleClickCopyApp = async () => {
  console.log('Copied to clipboard', url.value)
  try {
    await toClipboard(url.value)
    console.log('Copied to clipboard', url.value)
    ElMessage.success('复制成功')
  } catch (e) {
    console.error(e)
    ElMessage.success('复制失败')
  }
}

2. vue-use

// package.json

"@vueuse/core": "^10.9.0"

import { useClipboard } from '@vueuse/core'
const { copy, isSupported } = useClipboard({ source })
const url = ref()
await copy(url.value)

async function handleClickCopyApp() {
  console.log('Copied to clipboard', url.value)
  try {
    await copy(url.value)
    console.log('Copied to clipboard', url.value)
    ElMessage.success('复制成功')
  }
  catch (e) {
    console.error(e)
    ElMessage.success('复制失败')
  }
}