Vue3.x中使用Clipboard.js

今天在项目中遇到了写入剪切板的需求，首先想到了在之前学习jquery时使用过的Clipboard.js，接下来就来记录一下使用方法及踩过的坑与解决办法。

1.Clipboard.js介绍

现代化的“复制到剪切板”插件。不依赖 Flash，不依赖任何框架。gzip 压缩后仅 3kb。 --翻译自官网

由于是在Vue3环境下，所以这里使用插件：vue-clipboard3 将 Clipboard.js 支持 composition API

2.安装

因为是在Vue中使用 所以这里只介绍包管理工具安装方式

npm install vue-clipboard3 --save

3.例子

<template lang="html">
  <button @click="copy">Copy!</button>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import useClipboard from 'vue-clipboard3'

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

    const copy = async () => {
      try {
        await toClipboard('Any text you like')
        console.log('Copied to clipboard')
      } catch (e) {
        console.error(e)
      }
    }

    return { copy }
  }
})
</script>

4.???

一般来说拿了例子就应该结束了，不过眼瞎秉承勇于试错的学习信念 误将例子代码 import useClipboard from 'vue-clipboard3' 看成 import { toClipboard } from 'vue-clipboard3'

随后调用报错

toClipboard("test");
====================
error: toClipboard is not a function

5.解决过程

打开此插件的源码看了一下

它导出了一个函数

所以修改代码：

import clipBorad from "vue-clipboard3";
let Clip = clipBorad;
let { toClipborad } = Clip();

在写这篇文章时发现了其实是看错了例子代码，不过好在自己摸索出来的用法跟官方例子一直还算比较欣慰。 又是绕弯的一天，加油！