vue3 如何实现文本的一键复制

需求

如下图所示，在页面红色箭头所指的地方有一个复制的小图标，点击这个图标能够将这段token复制下来。

实现

直接上步骤！

1. 装包

npm i vue-clipboard3

这是从 npm 官网直接复制的代码。它的官方网站是这样写的：

yarn add vue-clipboard3

or

npm install --save vue-clipboard3

而且官方网站里面有详细的使用教程。

2. 使用

html ：

<div style="background: #EAF2FF;" class="content-div">
    <div class="text">API-KEY</div>
    <div class="api-key">
        <span>{{ apiKey }}</span>
        <div tabindex="3" class="copy-icon" @click="handleCopy"></div>
    </div>
</div>

js：

import clipBoard from 'vue-clipboard3'
let { toClipboard } = clipBoard();    // 一键复制

const apiKey = ref('020a7563.....43cd0');
// 一键复制
const handleCopy = async () => {
    try {
        await toClipboard(apiKey.value);
        ElMessage({
            message: 'Copy',
            type: 'success',
        })
    } catch (e) {
        ElMessage({
            message: e,
            type: 'error',
        })
    }
}