首页 前端知识 使用@vueuse/core 中组合式函数实现一键复制

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

2024-05-22 09:05:37 前端知识 前端哥 131 554 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9087.html
标签
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!