关于javascript:告别-Flash-和臃肿框架这个-3-万-Star-的开源工具帮你提高效率

31次阅读

共计 3405 个字符,预计需要花费 9 分钟才能阅读完成。

clipboard.js 用于剪贴板复制,gzip 压缩版仅有 3kb。

为什么抉择 clipboard.js

将文本复制到剪贴板不应该搞得简单,它不应该须要几十个步骤来配置或数百 KB 来加载,更不应该依赖于 Flash 或其余臃肿的框架。

clipboard.js 解脱了这些限度,就能够实现便捷轻量的操作剪贴板。

装置

npm 装置:

npm install clipboard --save

或者下载压缩包文件:https://github.com/zenorocha/…

配置

如果曾经通过 npm 装置,则间接 import:

import ClipboardJS from "clipboard";

如果不应用 npm 治理,须要通过 script 引入或者通过 第三方 CDN 加载。

<script src="dist/clipboard.min.js"></script>

而后通过传入 DOM 选择器 或 HTML 元素 或 HTML 元素数组 创立 Clipboard 实例。

new ClipboardJS('.btn');

个别状况下,对于所有符合条件的元素都须要增加监听事件,但如果符合条件的元素较多,这样会耗费大量的内存。
因而,clipboard.js 应用了 事件代理,用一个监听器代替了全副的监听器,这样最大水平的保障了性能。

应用

从其余元素中拷贝内容

如果须要从其余元素中拷贝内容,能够通过在触发元素上增加 data-clipboard-target 属性,属性值为一个选择器,选中被拷贝元素。

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

从其余元素中剪贴内容

在触发元素中增加 data-clipboard-action 属性,属性值能够为 copy 或者 cut,设置为 cut 即可剪贴内容,默认为 copy

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

留神:cut 仅在 <input><textarea> 元素中失效。

从属性中拷贝内容

如果不须要从其余元素中拷贝内容,那么能够在触发元素上增加 data-clipboard-text 属性,属性值为须要拷贝的内容。

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

事件处理

如果在拷贝完后须要执行其余自定义操作,能够增加 successerror 事件。

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();});

clipboard.on('error', function(e) {console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

实例展现:进入 官网,关上 console 即可。

Tooltips

因为每个利用都有不同的设计,因而 clipboard.js 不提供任何内置 css 的 tooltip 解决方案。

如果须要实现 tooltip 成果,能够参考官网实现相似成果,网站中应用的是 GitHub’s Primer 款式。

高级选项

如果不想批改 HTML
代码,也能够应用 API 实现上述成果,只须要在实例中申明函数,返回所需值。

例如,如果须要动静设置 target,能够返回一个 Node 节点。

new ClipboardJS('.btn', {text: function(trigger) {return trigger.getAttribute('aria-label');
    }
});

如果须要动静设置 text,能够返回一个 String。

new ClipboardJS('.btn', {text: function(trigger) {return trigger.getAttribute('aria-label');
    }
});

如果在 Bootstrap 模态框(Modals)中应用,或是在其余批改焦点的类库中应用,能够将取得焦点的元素设置为 container 属性的值。

new ClipboardJS('.btn', {container: document.getElementById('modal')
});

同样地,单页面利用中,如果须要更加准确地治理 DOM 的生命周期,能够清理事件以及创立的对象。

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

Vue3 中尝试应用 clipboard.js

新建一个 Vue3 我的项目,装置 clipboard.js

// 新建 vue 我的项目
vue create clipboard

// 装置
yarn add clipboard

简略应用剪贴性能

批改 App.vue,引入 ClipboardJS,删除其余元素,新增测试用元素

<!-- App.vue -->
<template>
  <div class="wrapper">
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />

    <button
      class="btn"
      data-clipboard-target="#foo"
      data-clipboard-action="cut"
    >
      Copy to clipboard
    </button>
  </div>
</template>

在 Vue3 setup 函数中初始化 clipboard 实例

// 引入
import ClipboardJS from "clipboard";

// setup 函数中实例化
setup() {new ClipboardJS(".btn");
},

能够看到点击按钮剪贴胜利!

增加 success 函数

当剪贴胜利后,弹出剪贴胜利信息,对上述示例稍作批改,input 中的内容采纳双向绑定:

<template>
  <div class="wrapper">
    <input id="foo" :value="content" />

    <button
      class="btn"
      data-clipboard-target="#foo"
      data-clipboard-action="cut"
    >
      Copy to clipboard
    </button>
  </div>
</template>

// setup 函数
  setup() {const clipboard = new ClipboardJS(".btn");
    const content = ref("clipboard 测试内容");
    clipboard.on("success", (e) => {alert(` 剪贴胜利:${e.text}`);
      console.info("Action:", e.action);
      console.info("Text:", e.text);
      console.info("Trigger:", e.trigger);
      e.clearSelection();});
    return {content};
  }

弹出框如下:

打印如下:

浏览器反对

开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库,包含:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。

正文完
 0