知识笔记（八十八）———vue实现复制粘贴功能

1、安装库并引入

npm i vue-clipboard3 --save

2、在需要文件中导入:

import clipboard3 from “vue-clipboard3”;

3、解构api、定义methods

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

代码如下:toClipboard() 第一个参数是文本;第二个参数是节点 

 

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

（可在常量 text 中直接写需要复制的内容进行复制，无需在输入框中填写就可复制，同理，输入框可以不用，在某些情况下直接写到常量中写死）