Vue3 - 实现文本复制粘贴功能

1.安装库并导入

npm i vue-clipboard3 --save

2.在需要的前端文件中导入

import clipboard3 from  'vue-clipboard3'

html结构如下

<template>
  <div class="hello">
    <input type="text" v-model="text">
    <button @click="copy">点击复制</button>
  </div>
</template>

3.解构api、定义methods

    const text =ref("")
    //解构出复制方法
    const { toClipboard } = clipboard3();
    const copy = async () => {
     try {
        await toClipboard(text.value);
        alert("复制text: "+text.value+' 复制成功')
     } catch (error) {
       alert("复制失败")
     }
    }