知识笔记（八十八）———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?中直接写需要复制的内容进行复制，无需在输入框中填写就可复制，同理，输入框可以不用，在某些情况下直接写到常量中写死）