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

@vueuse/core 介绍

• 是一个基于 组合 API 封装的库
• 提供了一些网站开发常用的工具函数，切得到的是响应式数据
• 安装  

  pnpm i @vueuse/core

  使用步骤

• // 1、安装后 pnpm i @vueuse/core ，导入组件库 用useClipboard函数实现复制
  import { useClipboard } from '@vueuse/core'
  import { showToast } from 'vant'
  // 2、调用useClipboard函数，解构出方法
  //copy是复制的函数  copied 是boolean值 是否已复制完成  isSupported 检查浏览器是否支持
  const { copy, copied, isSupported } = useClipboard()
  //3、封装onCopy函数，绑定到一键复制的按钮中
  const onCopy = (orderNo: string) => {
    // 3.1检查浏览器是否 支持复制 不支持提示用户
    if (isSupported.value) return showToast('未授权，不支持')
    // 3.2 浏览器支持 调用oncopy 复制 orderNo是需要复制的内容，按钮点击的传过来的形参
    copy(orderNo)
  }
  // 4 监听copied，成功则提示用户
  watch(copied, () => {
    if (copied.value) showToast('复制成功')
  })

    <!-- 5 按钮绑定 复制事件 -->
              <span class="copy" @click="onCopy(detail?.orderNo!)">复制</span>