clipboard剪贴板插件的使用教程

遇到问题不要慌

已于 2024-12-16 15:34:43 修改

阅读量8.1k

点赞数

文章标签： javascript 前端开发语言

于 2022-05-18 11:05:31 首次发布

本文链接：https://blog.youkuaiyun.com/zuo_kaizheng/article/details/124838145

版权

vue-clipboard3插件是实现复制文本到剪贴板功能的 JavaScript插件，实现复制剪切功能非常方便

实现效果图

在这里插入图片描述

安装

//npm 安装
npm install vue-clipboard3 --save
//yarn 安装
yarn add vue-clipboard3

使用案例

<template lang="html">
  <button @click="copy">Copy!</button>
  <div id="copy_content">
		要粘贴的内容		
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref,} from "vue";
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
const sourceCode = ref()
const copy = async () => {
sourceCode.value = document.getElementById("copy_content").innerHTML
  try {
    await toClipboard(sourceCode.value);
     console.log('Copied to clipboard')
    //Message({
     // type: "success",
    //  text: "代码复制成功",
  //  })
  } catch (e) {
   console.error(e)
    //Message({
     // type: "error",
     // text: "代码复制失败",
   // })
  }
}
</script>