Vue-Clipboard3：轻松实现复制到粘贴板功能

一、前言

在现代Web开发中，剪贴板操作变得越来越重要。用户经常需要在浏览器中进行复制、粘贴等操作，而这些操作可以通过JavaScript实现。Vue-Clipboard3是一个基于Clipboard.js的粘贴板操作库，使用 Vue-Clipboard3 可以在Vue 3（composition api）中轻松复制到粘贴板，它使得在Vue3应用程序中进行粘贴板操作变得更加简单和方便。

Vue-Clipboard3的主要特点如下：

简单易用：Vue-Clipboard3提供了简洁的API，使得在Vue组件中实现剪贴板操作变得非常简单。

高度可定制：Vue-Clipboard3允许你自定义复制、粘贴等操作的样式和行为，以满足你的具体需求。

兼容性好：Vue-Clipboard3基于Clipboard.js，因此它可以在大多数现代浏览器上运行良好。

For use with Vue 3 and the Composition API. I decided to keep in line with the Vue 3 spirit and not make a directive out of this (if you want a vue directive, please make a pull request). I think it makes more sense and provides more clarity to just use this as a method in the setup() function.

Keep it simple.

这是作者写的一段话，大致意思是：此插件只能用于Vue 3和Composition API。保持与Vue 3的精神一致，不在此基础上做出指令的方式，只能将其用作setup（）函数中的一个方法更有意义，也更清晰。

保持简单。

二、安装

1.yarn

yarn add vue-clipboard3

2.npm

npm install --save vue-clipboard3

三、API

useClipboard(options: Options)

interface Options {
  /** 通过将元素添加到正文来修复IE。默认为true。 */
  appendToBody: boolean
}

返回一个对象：toClipboard。

toClipboard(text: string, container?: HTMLElement)

要求至少传入一个字符串参数。这是要复制到粘贴板的文本。第二个可选参数是一个html元素，当使用clipboard.js时，该元素将在内部用作容器。

四、使用方法

在 setup () {} 中使用：

<template>
  <div>
    <input type="text" v-model="text">
    <button @click="handleCopy">复制</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import useClipboard from 'vue-clipboard3'

export default defineComponent({
  setup() {
    const { toClipboard } = useClipboard()

    const text = ref('')

    const handleCopy = async () => {
      try {
        await toClipboard(text.value)
        console.log('复制成功')
      } catch (e) {
        console.error(e);
        console.error('复制失败')
      }
    }

    return { handleCopy, text }
  }
})
</script>

2.在setup语法糖中使用：

<template>
  <div>
    <input type="text" v-model="text">
    <button @click="handleCopy">复制</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import useClipboard from 'vue-clipboard3'

const { toClipboard } = useClipboard()

```javascript
在这里插入代码片

const text = ref(‘’)

const handleCopy = async () => {
try {
await toClipboard(text.value)
console.log(‘复制成功’)
} catch (e) {
console.error(e);
console.error(‘复制失败’)
}
}