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>

参考链接

https://juejin.cn/post/6969471191627071524