Today, I met the requirement of writing Clipboard in the project. First of all, I thought of clipboard. js which I used when LEARNING jquery before. Next, I will record the usage method, the pit I stepped on and the solution.

1. The Clipboard. Js is introduced

Modern copy to clipboard plugin. It doesn’t rely on Flash, it doesn’t rely on any framework. Only 3kb after gzip compression. — Translated from the official website

Since this is a Vue3 environment, the plugin is used here: VuE-Clipboard3 supports the Composition API with Clipboard.js

2. Install

Since it is used in Vue, this section only describes how to install the package management tool

npm install vue-clipboard3 --save
Copy the code

Example 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>
Copy the code

4.?????

Usually you just take an example and you’re done, Import useClipboard from ‘vue-clipboard3’ instead of import {toClipboard} from ‘vue-clipboard3’

The subsequent call reported an error

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

5. Resolution process

Open the source code of this plug-in to have a look

It derives a function

So modify the code:

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

When writing this article, I found that I actually misread the example code, but fortunately, I found out the usage and the official example has been more gratified. Another day of detour, come on!