粘贴板clipboard.js的使用方法

我就是我 2021-08-27 01:15 639阅读 0赞

### 粘贴板`clipboard.js`的使用方法 ###

#### 一、使用场景 ####

在移动端开发的时候，有的应用需要用户拷贝页面的内容，方便用户操作。此时，就是需要是用粘贴板功能。

--------------------

#### 二、使用步骤 ####

##### 1. `npm`安装`clipboard.js`插件 #####

npm install clipboard --save

##### 2. 页面`dom`结构 #####

<div class="url" id="target" v-show="false">{
       {currentPageUrl}}</div>
    <div class="btn" id="copyBtn" :data-clipboard-text="currentPageUrl" data-clipboard-action="copy" data-clipboard-target="#target" @click="coppUrl">复制</div>

##### 3. 在文件中引入 #####

import Clipboard from "clipboard";

##### 4. 使用方法 #####

coppUrl() { 
        let _this = this;
        let clipboard = new Clipboard("#copyBtn");
        clipboard.on("success", function(e) { 
            alert("复制成功");
            _this.showBtn();
            e.clearSelection();
        });
    },

--------------------

#### 三、注意事项 ####

*  如果需要在复制成功后，做业务处理，注意此时需要在`success`执行。
 *  对于`success`事件中，需要注意`this`的指向问题。`this`测试不是指向`vue`实例。
 *  `currentPageUrl`用户需要拷贝的文本。

--------------------

##### 6. 温馨提示 #####

更多博文，请关注：**xssy5431** 小拾岁月  
扫码：  
![20200622115352592.jpg][]

[20200622115352592.jpg]: /images/20210802/54a10b476c4f4191b20aca32e147ffdc.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Unity调用手机复制粘贴板 UniClipboard插件使用

插件地址：百度云盘链接：https://pan.baidu.com/s/1IWKG7cOfpKsOkNAoEMVBmA 提取码：8bgg csdn资源路径：[http

柔光的暖阳◎/ 2023年07月24日 08:55/ 0 赞/ 19 阅读

相关 js实现粘贴板功能 (实用）

原文出处：[https://blog.csdn.net/qq\_24184997/article/details/80769734][https_blog.csdn.net_q

清疚/ 2023年07月11日 11:15/ 0 赞/ 6 阅读

相关 Javascript 粘贴到剪切板

例子： <p> <button class="js-textareacopybtn" style="vertical-align:top;">Copy T

曾经终败给现在/ 2023年07月09日 15:29/ 0 赞/ 19 阅读

相关 uniapp中使用复制功能(复制文本到粘贴板)

[精选30+云产品，助力企业轻松上云！>>> ![hot3.png][]][30_ _hot3.png] > 在开发会遇到复制手机号啊,复制地址啊,复制内容啊,这样的需求,下

水深无声/ 2023年02月24日 11:16/ 0 赞/ 71 阅读

相关 js复制html到粘贴板,JS点击按钮复制内容到粘贴板中

写在前面有时候，我们文章中有一段经典代码或者精彩内容，可能会被人复制引用，如果用鼠标选择，非常不友好，尤其是移动端。这时候我们可以给该内容添加点击事件，比如双击复制到粘贴板

叁歲伎倆/ 2022年10月11日 03:53/ 0 赞/ 339 阅读

相关 Altium Designer复制粘贴的方法，以及特殊粘贴的使用

在使用Altium designed（以下简称AD）时，有时需要粘贴元器件。与常用的软件不同，AD的复制粘贴并不是ctrl + C 和 ctrl + V，并且复制过来的器件并没

女爷i/ 2022年05月31日 03:52/ 0 赞/ 5536 阅读

相关获取粘贴板内容

//2 Get Clipboard Data CString strClipboard; if (OpenClipboard())

淩亂°似流年/ 2022年04月15日 07:27/ 0 赞/ 266 阅读

相关彻底解决Virtualbox共享粘贴板不可使用问题

一.在虚拟机设置界面->常规中选择双向 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

爱被打了一巴掌/ 2022年04月05日 14:17/ 0 赞/ 524 阅读

相关 appium 获取android 粘贴板上的内容

appium 新版本增加了获取粘贴板的内容。如果使用appium旧版本，获取粘贴板的内容不是那么容易的，甚至百度谷歌各种搜，都无法找到合适的解决方法。新版本获取android

清疚/ 2021年09月29日 09:30/ 0 赞/ 722 阅读

相关粘贴板clipboard.js的使用方法

粘贴板`clipboard.js`的使用方法一、使用场景在移动端开发的时候，有的应用需要用户拷贝页面的内容，方便用户操作。此时，就是需要是用粘贴板功能。

我就是我/ 2021年08月27日 01:15/ 0 赞/ 640 阅读