clipboard使用总结

本文介绍了一个轻量级的JavaScript插件clipboard.js,该插件能够帮助开发者轻松地将文本复制到剪贴板。支持多种现代浏览器,包括Chrome、Firefox、IE等。文中详细解释了如何通过不同的方式使用此插件来复制文本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 概述

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
官网

2. 使用方式

2.1 引入js文件

以下所有的代码都使用到以下js文件

<script src="/web2/component/clipboard/1.6.1/clipboard.js"></script> 

clipboard复印内容的方式有
- 从target复印目标内容
- 通过function 要复印的内容
- 通过属性返回复印的内容

2.2 从target复印目标内容

可以从input、textare、div中通过copy/cut获取内容目标内容,其HTML的代码如下

  • input
    data-clipboard-target指向复印节点,这里指input的目标id
    data-clipboard-action这里使用copy,同时也可以使用cut,则点击按钮后,内容里的值被剪切。如果没有指定,则默认值是copy。cut只能在input和textare中起作用
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
  • textare
    和上面的主要区别只是input和textare不同
<textarea id="bar">hello</textarea> 
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
  • div
    和上面的主要区别只是input和div不同
<div>hello_div</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

以上的插件的初始化JS代码都是相同:

   <script>
       // button的class的值
        var clipboard = new Clipboard('.btn');
        clipboard.on('success', function(e) {
            console.log(e);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>

2.3 通过function 要复印的内容

通过target,text的function复印内容

  • 通过target的function复印内容
    通过target指定要复印的节点,这里返回舒值是‘hello’
    <button class="btn">Copy_target</button>
    <div>hello</div>

    <script>
    var clipboard = new Clipboard('.btn', {
    // 通过target指定要复印的节点
        target: function() {
                   return document.querySelector('div');
              }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
  • 通过text的function复印内容
    text的function指定的复印内容,这里返回‘to be or not to be’
 <button class="btn">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn', {
    // 点击copy按钮,直接通过text直接返回复印的内容
        text: function() {
            return 'to be or not to be';
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

2.4 通过属性返回复印的内容

通过data-clipboard-text属性返回复印的内容

  • 单节点
    通过id指定节点对象,并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容
// 通过id获取复制data-clipboard-text的内容 
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>

<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
  • 多节点
    通过button返回所有button按钮,并做为参数传送给Clipboard。每个按钮被点击时,返回值的内容是其对应的data-clipboard-text的内容,分别是1,2,3
//  多节点获取button的data-clipboard-text值
 <button data-clipboard-text="1">Copy</button>
    <button data-clipboard-text="2">Copy</button>
    <button data-clipboard-text="3">Copy</button>
<script>
    var btns = document.querySelectorAll('button');
    var clipboard = new Clipboard(btns);

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
  • 多节点
    通过class获取所有button按钮,并做为参数传送给Clipboard。每个按钮被点击时,返回值的内容是其对应的data-clipboard-text的内容,分别是1,2,3
//   通过class注册多个button,获取data-clipboard-text的值
<button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

3. 代码

github

### 在 Vue 项目中使用 clipboard 实现复制粘贴功能 在 Vue 项目中实现复制粘贴功能,可以使用 `clipboard.js` 或其封装的 Vue 插件,如 `vue-clipboard2`。以下是具体的实现方法。 #### 使用 `vue-clipboard2` 1. **安装插件** 首先需要安装 `vue-clipboard2` 插件: ```bash npm install vue-clipboard2 --save ``` 2. **在 `main.js` 中配置插件** 在项目的入口文件中引入并配置插件: ```javascript import Vue from 'vue' import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // 自动设置容器 Vue.use(VueClipboard) ``` 3. **在组件中使用** 在组件中通过指令 `v-clipboard` 实现复制操作,并绑定成功或失败的回调函数: ```html <template> <div class="footerButton copyBank" v-clipboard:copy="b.BankNo" v-clipboard:success="onCopy" v-clipboard:error="onError"> {{ $t("m.recharge.copyBank") }} </div> </template> ``` ```javascript methods: { onCopy(e) { this.isShowCopy = true; this.showCopyResult = this.$t("m.recharge.copySuccess"); }, onError(e) { this.isShowCopy = true; this.showCopyResult = this.$t("m.recharge.copyFail"); } } ``` #### 使用原生 `clipboard.js` 1. **安装依赖** 安装 `clipboard`: ```bash npm install clipboard --save ``` 2. **在组件中引入并使用** 在需要使用的组件中引入 `clipboard` 并进行初始化: ```html <template> <el-button type="text" size="small" class="copyBtn" @click="copy($event)">复制</el-button> </template> ``` ```javascript import Clipboard from 'clipboard' methods: { copy(e) { const clipboard = new Clipboard(e.target, { text: () => '复制的内容' }) clipboard.on('success', e => { this.$message({ type: 'success', message: '复制成功' }) clipboard.destroy() }) clipboard.on('error', e => { this.$message({ type: 'waning', message: '该浏览器不支持自动复制' }) clipboard.destroy() }) clipboard.onClick(e) } } ``` #### 自定义封装函数 也可以将复制粘贴功能封装成一个通用函数,以便在多个组件中复用: ```javascript function copy(e, text) { const that = this; const clipboard = new Clipboard(e.target, { text: () => text }); clipboard.on("success", e => { that.$message({ type: "success", message: "复制成功" }); clipboard.off("error"); clipboard.off("success"); clipboard.destroy(); }); clipboard.on("error", e => { that.$message({ type: "waning", message: "不支持自动复制" }); clipboard.off("error"); clipboard.off("success"); clipboard.destroy(); }); clipboard.onClick(e); } ``` ### 总结 通过上述方法,可以在 Vue 项目中轻松实现复制粘贴功能。无论是使用 `vue-clipboard2` 还是直接操作 `clipboard.js`,都可以根据项目需求选择合适的方案。[^1]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值