首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue复制内容到剪切板

vue复制内容到剪切板代码实现

2023-08-23 08:45:27 作者：敲代码的TKP

这篇文章主要给大家介绍了关于vue复制内容到剪切板代码实现的相关资料,在Web应用程序中剪贴板(Clipboard)操作是非常常见的操作之一,需要的朋友可以参考下

一、需求说明

在项目中点击按钮复制某行文本是很常见的应用场景，在 Vue 项目中实现复制功能需要借助 vue-clipboard2 插件。

二、代码实现

1、安装 vue-clipboard2 依赖

（不行的话可以切换成淘宝镜像源 npm config set registry https://registry.npm.taobao.org ）

npm install --save vue-clipboard2

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

示例代码如下：

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

3、在 vue 文件中使用

<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复制内容到剪切板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！