VueUse 中的 useClipboard 怎么用？

terry 21小时前阅读数 13 #Vue

文章标签 VueUse useClipboard

在前端开发中，操作剪贴板是一个常见的需求，比如实现复制文本到剪贴板的功能，VueUse 是一个非常实用的 Vue 组合式函数库，其中的 useClipboard 函数可以帮助我们轻松实现剪贴板操作，那 VueUse 中的 useClipboard 到底怎么用呢？下面我们来详细了解一下。

安装 VueUse

你需要在你的 Vue 项目中安装 VueUse，如果你的项目是基于 npm 的，那么在项目目录下打开终端，输入命令：npm install @vueuse/core，如果是基于 yarn 的项目，就输入命令：yarn add @vueuse/core，安装完成后，就可以在项目中使用 useClipboard 了。

基本使用

在 Vue 组件中使用 useClipboard 非常简单，先在组件中导入它，比如在 Vue3 的单文件组件中：

```html ```

上面的代码中，我们通过 useClipboard 解构出了 copy 函数，当点击按钮时，调用 copy 函数并传入要复制的文本内容,就可以将文本复制到剪贴板了。

获取复制状态

有时候我们不仅想实现复制功能，还想知道复制操作是否成功，useClipboard 也提供了相关的状态,修改上面的代码：

```html ```

这里我们又解构出了 isSupported（判断当前环境是否支持剪贴板操作）、isPending（复制操作是否正在进行）、isSuccess（复制是否成功）、isFail（复制是否失败）这些状态，通过这些状态，我们可以更细致地处理复制操作的各种情况，比如在复制过程中显示“正在复制...”,根据复制结果给出相应提示等。

高级用法 - 自定义选项

useClipboard 还支持一些自定义选项，比如我们可以设置文本的类型，默认是 'text/plain'，如果我们要复制 HTML 文本,可以这样：

```html ```

还可以设置一些其他选项,比如当复制成功或失败时触发的回调函数。

```html ```

通过这些自定义选项,我们可以让剪贴板操作更加符合我们项目的具体需求。

在不同 Vue 版本中的使用

（一）Vue2 中的使用

虽然 VueUse 主要是为 Vue3 设计的，但在 Vue2 中也可以使用，不过需要一些额外的配置，首先要安装 @vue/composition-api，因为 Vue2 本身不支持组合式 API，安装命令：npm install @vue/composition-api 或 yarn add @vue/composition-api，然后在项目入口文件（main.js）中进行配置：

```javascript import Vue from 'vue'; import VueCompositionAPI from '@vue/composition-api'; import App from './App.vue';

Vue.use(VueCompositionAPI);

new Vue({ render: h => h(App), }).$mount('#app');

<p>之后在 Vue2 的组件中就可以像在 Vue3 中一样使用 useClipboard 了，只是语法上可能会有一些细微差别，比如在 Vue2 的单文件组件中，需要使用 setup 函数来使用组合式 API。</p>
### （二）Vue3 中的优势
<p>在 Vue3 中使用 useClipboard 更加原生和便捷，Vue3 的组合式 API 与 VueUse 配合得非常好，代码结构更加清晰，逻辑也更容易组织，Vue3 的响应式系统可以让我们更方便地处理复制状态等响应式数据，比如上面例子中使用的 isSupported、isPending 等状态，在 Vue3 中可以直接在模板中通过插值表达式使用，响应式更新非常自然。</p>
## 六、实际项目中的应用场景
### （一）复制链接
<p>在很多网站中，都有复制链接的功能，比如一个文章详情页，用户点击“复制链接”按钮，就可以将当前文章的链接复制到剪贴板，方便分享，使用 useClipboard 就可以轻松实现这个功能：</p>
```html
<template>
  <button @click="copyLink">复制链接</button>
</template>
<script setup>
import { useClipboard } from '@vueuse/core';
import { useRoute } from 'vue-router';
const route = useRoute();
const { copy } = useClipboard();
const copyLink = () => {
  copy(window.location.origin + route.fullPath);
};
</script>

（二）复制代码片段

在代码分享类的网站或者文档中，经常会有复制代码片段的需求，比如一个技术博客，展示了一段代码示例，用户点击“复制代码”按钮,就可以将代码复制到剪贴板。

```html ``` ### （三）表单数据复制

在一些数据录入或展示的表单场景中，也可能会用到复制功能，比如一个用户信息展示页面,用户可能想复制某个字段的值。

```html ```

注意事项

（一）浏览器兼容性

虽然 useClipboard 尽力提供了良好的兼容性，但还是要注意不同浏览器的表现，比如有些老版本的浏览器可能对剪贴板操作的支持不够完善，或者需要用户授予相应的权限（比如在一些移动端浏览器中），在实际项目中，要做好兼容性测试，并根据情况提供一些降级处理，比如当检测到不支持剪贴板操作时,提示用户手动复制。

### （二）安全问题

剪贴板操作涉及到用户的数据，要注意安全，比如不要随意复制敏感信息（如用户密码等），如果确实需要复制敏感信息，要做好加密处理和权限验证，在使用自定义选项设置文本类型等操作时，要确保输入的内容是可信的，防止 XSS 攻击等安全问题。

VueUse 中的 useClipboard 是一个非常强大且易用的工具，通过上面的介绍，你可以根据项目的具体需求，灵活运用它来实现各种剪贴板操作功能，无论是简单的文本复制，还是复杂的带有状态处理和自定义选项的操作，useClipboard 都能很好地满足，在实际开发中，多尝试、多实践,你会发现它能为你的项目带来很大的便利。