首页 > 其他分享 >vue3使用clipboard

vue3使用clipboard

时间:2023-01-04 17:44:06浏览次数:51  
标签:initClipboard vue3 onMounted clipboard Clipboard 使用 import

<div class="content-link">
    <span id="link" class="content-link-url ellipsis">{{ userInfo?.user.referralUrl }}</span>
    <CopyIcon @click="copyUrl" class="copy-link" data-clipboard-target="#link" />
</div>
import Clipboard from 'clipboard'
import { onMounted } from 'vue'

let clipboard = null
const initClipboard = () => {
  clipboard && clipboard.destroy()
  clipboard = null
  clipboard = new Clipboard('.copy-link')
}
onMounted(() => {
  initClipboard()
})
// 复制分享链接
const copyUrl = () => {
  clipboard.on('success', function (e) {
    alert(111)
    e.clearSelection()
    initClipboard()
  })
  clipboard.on('error', function (e) {
    alert(222)
  })
}

 

标签:initClipboard,vue3,onMounted,clipboard,Clipboard,使用,import
From: https://www.cnblogs.com/-liujia/p/17025577.html

相关文章

  • 使用Adb与Pico传输文件
    一、安装apk到Pico 1、下载并解压Adb,下载地址2、通过数据线将Pico一体机连接到电脑,打开命令行工具,进入Adb所在文件夹,输入adbdevices,会展示设备的信息。 3、输入adb......
  • 微信小程序基础之媒体(图片,音频,视频)和地图的使用
    好久没有写过关于微信小程序的Demo了,今天向大家展示的关于媒体(图片,音频,视频)和地图的使用方法,希望对大家有所帮助,不喜勿喷,谢谢~代码中都有必要的文字注释,部分代码如下:图片:<!-......
  • Swift基础之如何使用iOS 9的Core Spotlight框架
    本文由​​CocoaChina​​译者KingOfOnePiece(博客)翻译作者:GABRIELTHEODOROPOULOS?校对:hyhSuper原文:​​HowToUseCoreSpotlightFrameworkiniOS9​​iOS每一次版本的......
  • c# webApi返回Excel数据流 || 使用Excel数据流的方式下载Excel
    背景:在前端无法生成特殊的excel表格,或操作复杂的时候会通过后台进行生成excel。但是服务器的资源也非常宝贵,所以通过数据流的方式就可以实现:不在服务器存储的情况下,使......
  • 使用感受
    免费云服务器很好用!云主机质量非常好,推荐大家体验.三丰云免费服务器连接速度快,可以用来测试,使用起来方便,不卡顿,而且永久免费,适合做网站服务器、数据处理,比起虚拟主机更自由,......
  • 关于asan内存检测工具的原理和使用
    Hello,各位看官好,小弟的公司最近开始使用asan这个工具了,最近在晚上查了一下,不查不知道,一查吓一跳,这个工具真的是神一般的工具,所以我就花了一点时间整理了一下asan工具的......
  • 网上一个哥们写的,使用Python写一个m3u8多线程下载器 -- 没用起来
    文章目录I.挖坑缘由II.功能/更新记录III.代码1.GUI2.下载工具类3.逻辑代码IV.下载地址I.挖坑缘由现在很多在线观看的视频为了防盗链使用了M3u8格式,想要下载的话比较麻烦,如果......
  • 在UOS下找不到windows用户之前使用的部分字体,如何解决?
    问题描述:windows用户之前使用的部分字体在UOS下找不到,如何解决?解决方法:首先需要说明下,字体通常是有版权的,在安装时需要注意版权问题。1、拷贝字体文件至/usr/share/fon......
  • mysql show processlist的使用
    showfullprocesslist用来查看当前线程处理情况,具体信息请参考官网:https://dev.mysql.com/doc/refman/5.7/en/show-processlist.htmlshowfullprocesslist返回的结果......
  • 使用EOF生成文件,变量名为空
    1.使用EOF变量名为空案列EOF不加单引号执行cat>inotify_rsynx.sh<<EOF#!/bin/bashINOTIFY_CMD="/usr/local/bin/inotifywait-mrq-emodify,create,attrib,mov......