@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>