当我们想要在前端页面中实现复制粘贴功能时，往往需要使用浏览器提供的 Clipboard API，但是该 API 并未得到所有浏览器的支持，特别是在一些低版本或不常见的浏览器中表现不佳。clipboard-polyfill 就是一个解决方案，它是一个基于 Clipboard API 的 polyfill 库，可以使得在不支持 Clipboard API 的浏览器中也能够实现复制粘贴功能。
安装
你可以使用 npm 或者 yarn 进行安装：
npm install clipboard-polyfill --save # 或者 yarn add clipboard-polyfill
使用方法
引入
使用 import 或者 require 的方式将 clipboard-polyfill 引入到项目中。
import ClipboardJS from 'clipboard';
// 或者
const ClipboardJS = require('clipboard');初始化
创建一个新的 ClipboardJS 实例，并传递需要进行复制操作的元素的选择器作为参数：
const clipboard = new ClipboardJS('.copy-btn');这里的 .copy-btn 是一个用于复制文本的按钮，当用户点击该按钮时，相关文本内容就会被复制到剪贴板中。
处理成功和失败的情况
clipboard-polyfill 提供了两个回调函数，用于处理复制操作成功和失败的情况。你可以在创建 ClipboardJS 实例时传递这两个回调函数：
-- -------------------- ---- -------
----- --------- - --- ------------------------ -
-- -------------
---------- --- -- -
-------------------- -- --------- ----------------
--
-- -------------
-------- --- -- -
--------------------- -- ---- -- -------------
-
---示例代码
下面是一个完整的示例代码，展示了如何使用 clipboard-polyfill 实现复制文本功能：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ----------
------- ----------------------------------------------------------------------------------
-------
------
------- ---------------- --------------------------- ---------------------
--------
----- --------- - --- ------------------------ -
---------- --- -- -
-------------------- -- --------- ----------------
--
-------- --- -- -
--------------------- -- ---- -- -------------
-
---
---------
-------
-------指导意义
使用 clipboard-polyfill 可以帮助我们解决在不同浏览器中实现复制粘贴功能的兼容性问题。同时，了解 clipboard-polyfill 的使用方法也可以让我们更加深入地了解 Clipboard API 的实现原理，提高我们在前端开发中的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37094