ClipBoard.js 使用很简单，它使用 Clipboard API 实现跨浏览器复制功能，其 API 设计很清晰易用

ClipBoard.js 是一个功能强大的剪贴板库，它可以帮助你轻松地将文本或文件复制到剪贴板。该库的 API 设计清晰易用，它可以让你轻松地实现跨浏览器的复制功能。在本文中，我们将详细介绍 ClipBoard.js 的使用方式。

安装

首先，你需要在你的项目中安装 ClipBoard.js。你可以通过以下方式安装该库：

npm install clipboard --save

或者

yarn add clipboard

安装完成后，你就可以在你的代码中使用 ClipBoard.js 了。

使用

要使用 ClipBoard.js，你需要创建一个新的 ClipBoard 实例。你可以通过以下方式创建实例：

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

在上面的代码中，我们将创建一个新的 ClipBoard 实例，并将其绑定到具有 btn 类的所有元素上。这意味着当用户点击具有 btn 类的元素时，ClipBoard.js 将会自动将该元素的内容复制到剪贴板。

你还可以通过以下方式将文本复制到剪贴板：

clipboard.copy('Hello world!');

在上面的代码中，我们将使用 copy() 方法将 "Hello world!" 文本复制到剪贴板。

事件

ClipBoard.js 提供了多种事件，你可以通过这些事件来监听剪贴板操作。例如，你可以使用 success 事件来监听复制操作是否成功：

clipboard.on('success', function(e) {
  console.log('复制成功！');
});

你还可以使用 error 事件来监听复制操作是否失败：

clipboard.on('error', function(e) {
  console.log('复制失败！');
});

选项

ClipBoard.js 提供了多种选项，你可以通过这些选项来自定义库的行为。例如，你可以通过 target 选项来指定要复制的元素：

const clipboard = new ClipboardJS('.btn', {
  target: function(trigger) {
    return trigger.previousElementSibling;
  }
});

在上面的代码中，我们将使用 target 选项来指定要复制的元素是 btn 元素的前一个兄弟元素。

结论

ClipBoard.js 是一个功能强大且易于使用的剪贴板库，它可以帮助你轻松地实现跨浏览器的复制功能。该库提供了多种选项和事件，你可以通过这些选项和事件来自定义库的行为。在本文中，我们详细介绍了 ClipBoard.js 的使用方式，希望对你有所帮助。