VueUse 常用函数-useClipboard

useClipboard

反应式剪贴板API。提供响应剪贴板命令（剪切、复制和粘贴）以及异步读取和写入系统剪贴板的能力。对剪贴板内容的访问在权限API后面进行门控。未经用户许可，不允许读取或更改剪贴板内容。

使用

1. copy(拷贝函数)

2. copied 是否拷贝成功，默认1.5s恢复状态

3. isSupported 浏览器是否支持，需要授权读取粘贴板和写入粘贴板权限

import { useClipboard } from '@vueuse/core'

const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })

 <div v-if="isSupported">
    <button @click='copy(source)'>
      <!-- by default, `copied` will be reset in 1.5s -->
      <span v-if='!copied'>Copy</span>
      <span v-else>Copied!</span>
    </button>
    <p>
      Current copied: <code>{{ text || 'none' }}</code>
    </p>
  </div>
  <p v-else>
    Your browser does not support Clipboard API
  </p>

实战

<span class="copy" @click="onCopy()">复制</span>

//TS部分
const { copy, copied, isSupported } = useClipboard()
    /**
     * 复制回调
     */
    const onCopy = () => {
        if (!isSupported.value) showToast('浏览器不支持')
        copy(item.value?.orderNo || '')
    }

    /**
     * 复制后提示
     */
    watch(copied, () => {
        if (copied.value) showToast('复制成功')
    })