VUE实现复制功能（个人记录）

oyxm____

于 2023-08-28 17:27:00 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/oyxm____/article/details/132543519

本文介绍了如何在Vue项目中使用vue-clipboard2插件实现点击按钮将指定文本复制到剪贴板的功能，包括全局引入插件和在组件中使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中实现复制内容到剪切板

一、安装 vue-clipboard2 依赖

npm install --save vue-clipboard2

二、在 main.js 文件中全局引入插件

import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)

三、使用

<template>
  <div>
    <el-button
      @click="onCopy"
      >复制</el-button
    >
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      text: "这是一段复制的文本",
    };
  },
  methods: {
    onCopy() {
      this.$copyText(this.text).then(
	      e=>{
	        console.log('复制成功：', e);
	      },
	      e=>{
	        console.log('复制失败：', e);
	      }
      )
    }
  }
};
</script>

链接: vue中实现复制内容到剪切板_vue复制内容到剪贴板_敲代码的TKP的博客-CSDN博客