clipboard复制功能，实现静态复制和动态复制

骑猪看日落 2023-07-13 13:53 27阅读 0赞

引入jQuery和clipboard文件

<script   src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

**静态复制**

<button id="copy2"  data-clipboard-text="imageim101">复制微信号并添加</button>

var btns = document.querySelectorAll('\#copy2');

var clipboard = new ClipboardJS(btns);

clipboard.on('success', function(e) \{

console.log(e);

\});

clipboard.on('error', function(e) \{

console.log(e);

\});

**动态复制**

//copyTarget用来盛放要复制的内容

<div id="copyTarget" style="opacity: 0;"></div>

//循环列表里进行复制

<div class="codeList">

<template v-for='(codeitem,index) in item.codeList'>

<div class="codeItem">

<span class="s1">\{ \{codeitem.code\}\}</span><span class="s2 copy" :data-param="codeitem.code" data-clipboard-action='copy'>复制</span>

</div>

</template>

</div>

//请求后台返回内容后进行复制

<div class="linkItem copy" data-param="link" data-clipboard-action='copy'>

<p>复制链接</p>

</div>

//复制功能

var clipboard = new ClipboardJS('.copy',\{

target: function(e) \{

var param = $(e).data("param");

if(param=='link')\{//复制链接

getCopyData($(this));

\}else\{//复制阅读码

$("\#copyTarget").text(param);

\}

return document.querySelector('\#copyTarget'); //复制标签文本

\}

\});

clipboard.on('success', function(e) \{

alert('复制账号信息成功');

console.log(e);

\});

clipboard.on('error', function(e) \{

console.log(e);

\});

function getCopyData(param)\{

//请求后台获取连接

$("\#copyTarget").text('1111');

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 clipboard复制功能，实现静态复制和动态复制

引入jQuery和clipboard文件 <script src="http://code.jquery.com/jquery-3.4.1.min.js"></scrip

骑猪看日落/ 2023年07月13日 13:53/ 0 赞/ 28 阅读

相关 vue clipboard 复制到粘贴板功能

import Clipboard from 'clipboard'; //复制到粘贴板 function handleClipboard(text: s

太过爱你忘了你带给我的痛/ 2023年02月25日 16:19/ 0 赞/ 341 阅读

相关 JS复制功能 Clipboard

Clipboard [http://www.clipboardjs

女爷i/ 2022年12月17日 07:17/ 0 赞/ 185 阅读

相关 clipboard复制浏览器url

clipboard官方地址： [https://clipboardjs.com/][https_clipboardjs.com] <div class="ipho

左手的ㄟ右手/ 2022年11月09日 12:53/ 0 赞/ 276 阅读

相关 clipboard 实现复制粘贴功能

<el-form-item label="ticketKey"> <span id="code">{ { baseForm.ticketKe

电玩女神/ 2022年10月31日 00:42/ 0 赞/ 309 阅读

相关使用clipboard.js实现复制功能

最近在开发中，使用原生js复制时，发现在360 7.1的低版本中无法实现代码的复制，随后便网上找了插件实现复制功能，检验后，发现在低版本也支持 demo： <i

青旅半醒/ 2022年05月23日 07:11/ 0 赞/ 281 阅读

相关 clipboard.js复制功能实现

前言 clipboard.js是前端实现复制文本到剪贴板的插件，简单记录一下使用方法。具体使用 1.简单的demo <!DOCTYPE html>

拼搏现实的明天。/ 2022年05月18日 09:05/ 0 赞/ 318 阅读

相关 VUE父子组件通信和Clipboard复制功能实现

VUE父子组件通信和Clipboard复制功能实现一、VU

- 日理万妓/ 2022年05月16日 07:36/ 0 赞/ 246 阅读

相关复制插件 - clipboard

1 yarn安装clipboard 2 引入：import ClipboardJS from 'clipboard'; 3 使用 <a class="copyTr

水深无声/ 2021年12月17日 00:01/ 0 赞/ 309 阅读

相关 clipboard.js复制操作

github项目地址:[https://github.com/zenorocha/clipboard.js][https_github.com_zenorocha_clipbo

男娘i/ 2021年10月15日 02:25/ 0 赞/ 325 阅读