使用@vueuse/core 中组合式函数实现一键复制

步骤：

• 知道 useClipboard 基本用法
• 使用 useClipboard 复制订单号

1：pnpm i @vueuse/core

1. copy(需要拷贝的内容)
2. copied 是否拷贝成功，默认1.5s恢复状态 
3. isSupported 浏览器是否支持，需要授权读取粘贴板和写入粘贴板权限
 

实现逻辑

import { useClipboard } from '@vueuse/core'
import { showToast } from 'vant'

 

// 复制
const { copy, isSupported } = useClipboard()
const onCopy = async () => {
  if (!isSupported.value) return showToast('未授权，不支持')
  await copy(item.value?.orderNo || '')
  showToast('已复制')
}

        <van-cell title="订单编号">
          <template #value>
            <span class="copy" @click="onCopy()">复制</span>
            {{ item.orderNo }}
          </template>
        </van-cell>