clipboard.js 前端非常實用的剪切板插件

作者:辰風(fēng)沐陽 閱讀:2554 發(fā)布時間:2022-11-30 上次更新:2023-12-07

1. clipboard.js 介紹


clipboard.js 是一個不需要 flash,將文本復(fù)制到剪切板的插件,體積很小,非常實用的一款插件

clipboard.js 開源地址: https://github.com/zenorocha/clipboard.js ,目前已有 32k Star,可見其很受歡迎

2. clipboard.js 安裝方式


方式一、通過 npm 使用

將 clipboard.js 安裝為運行時依賴

  1. npm install clipboard --save

方式二、通過 script 引入

在 clipboard.js 倉庫中的 dist 文件夾中下載 clipboard.min.js,或通過第三方 CDN 引入即可

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

3. clipboard.js 基本使用


首先需要通過傳遞 DOM 選擇器來實例化它,選擇器可以是 html 元素,也可以是 html 元素列表

用一個元素當觸發(fā)器來復(fù)制另一個元素的文本,data-clipboard-target 屬性后需要跟屬性選擇器

下面是一個簡單的使用示例:

  1. <script src="./dist/clipboard.min.js"></script>
  2. <input type="hidden" value="liang" id="foo">
  3. <button class="btn" data-clipboard-target="#foo">復(fù)制</button>
  4. <script>
  5. new ClipboardJS('.btn');
  6. </script>

可以通過 data-clipboard-action 屬性指定是 拷貝(copy) 還是 剪切(cut) 操作

  1. <button class="btn" data-clipboard-target="#foo" data-clipboard-action="cut">復(fù)制</button>

也可以通過屬性復(fù)制文本,不需要另一個元素當觸發(fā)器,可以使用 data-clipboard-text 屬性,在后面放上需要復(fù)制的文本

  1. <button class="btn" data-clipboard-text="hello vue">復(fù)制</button>

4. clipboard.js 事件監(jiān)聽


當復(fù)制/剪切成功時如果想要給個提示,可以使用下面方法監(jiān)聽其操作

  1. const clipboard = new ClipboardJS('.btn');
  2. clipboard.on('success', function (e) {
  3. // action: copy|cut
  4. // text: 復(fù)制的文本
  5. // trigger: 點擊的dom元素
  6. const { action, text, trigger } = e
  7. console.info('Action:', action);
  8. console.info('Text:', text);
  9. console.info('Trigger:', trigger);
  10. // 取消選中
  11. e.clearSelection();
  12. });

標簽: 其他