[JavaScript知识库] 基于 Vue 实现页面中文本的复制功能

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 基于 Vue 实现页面中文本的复制功能 -> 正文阅读

[JavaScript知识库]基于 Vue 实现页面中文本的复制功能

1. 需求说明

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

2. 代码实现

安装依赖：

npm i vue-clipboard2 --save

在 main.js 文件中全局引入插件，示例代码如下：

import Vue from 'vue'
import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

new Vue({
  render: h => h(App)
}).$mount('#app')

在组件中有两种方法可以实现复制功能。
方法一：
使用 vue-clipboard2 提供的指令

<template>
  <div>
    <el-button
      type="success"
      size="small"
      style="margin-left: 10px"
      v-clipboard:copy="text"
      v-clipboard:success="onCopySuccess"
      v-clipboard:error="onCopyError"
      >复制</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是一段复制的文本",
    };
  },
  methods: {
    onCopySuccess(e) {
      // 复制成功的回调函数
      console.log('复制成功：', e);
    },
    onCopyError(e) {
      // 复制失败的回调函数
      console.log('复制失败：',e);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

方法二：
使用 vue-clipboard2 全局绑定的 $copyText 事件方法

<template>
  <div>
    <el-button
      type="success"
      size="small"
      style="margin-left: 10px"
      @click="onCopy"
      >复制</el-button
    >
  </div>
</template>

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

<style lang="scss" scoped>
</style>