Vue3实现复制功能_vue-clipboard3 Vu3复制插件

一、关于clipboard.js 

clipboard.js 是网页端复制内容到粘贴板，常用的js库。

跨浏览器支持，pc，手机端支持。

轻量级，不依赖flash, 不依赖其他kuangji框架，gzip压缩后只有3kb大小

官网地址：

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

延伸版本：

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)

二、vue-clipbard3 使用教程

NPM 地址：vue-clipboard3 - npm

1.安装命令

npm install --save vue-clipboard3

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

toClipboard(text: string, container?: HTMLElement)

三、vue-clipbard3 使用案例

1.引入

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

2.事件操作

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

更多：

npm ERR code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
Vue 无法展示网络图片处理方案
Vue3 路由增加过度效果-淡入淡出