vue3复制，vue-clipboard3

1. clipboard.js

clipboard.js 是网页端复制内容到粘贴板，常用的js库。
跨浏览器支持，pc，手机端支持。
轻量级，不依赖flash, 不依赖其他kuangji框架，gzip压缩后只有3kb大小

1.1 官网地址：

clipboard.js — Copy to clipboard without Flash (clipboardjs.com)

1.2 延伸版本：

vue2中可以使用：vue-clipboard2, git源码：Inndy/vue-clipboard2: A simple vue2 binding to clipboard.js (github.com)
vue3中可以使用：vue-clipbard3，git源码：JamieCurnow/vue-clipboard3: Easily copy to clipboard in Vue 3 (github.com)

2. vue-clipboard3 使用教程

NPM 地址：vue-clipboard3 - npm

2.1 安装命令

npm install --save vue-clipboard3

2.2 使用案例

<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>

3. vue-clipboard3 使用案例

3.1 引入

import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();

3.2 事件操作

//复制
copyClick(content) {
	toClipboard(content);
	ElMessage({
		message: "复制成功",
		type: "success",
	});
},

4. 参考链接

vue3实现复制功能