Vue - 实现复制内容到剪贴板（一键复制）

前言

如果需要原生JS实现该功能，可参考这篇文章。

如果您 Vue 项目需要一键复制内容到系统剪贴板功能（且兼容性强的话），vue-clipboard2 是个非常好的插件。

一、安装插件

在项目根目录，打开终端执行以下命令：

npm install --save vue-clipboard2

二、引入插件

打开项目 main.js 文件，添加以下代码：

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

如下图所示：

三、使用方法

如果想了解更多，请参考插件官网：https://www.npmjs.com/package/vue-clipboard2。

方法一：

<template>
  <div>
	   <button
	   v-clipboard:copy="qq"
	   v-clipboard:success="onCopy"
	   v-clipboard:error="onError">复制QQ
	   </button>
   </div>
</template>
 
<script>
export default {
  data() {
    return {
      qq: '599729022'
    }
  },
  methods: {
  	 /**
      * 复制成功
      * @param {Object} e - 剪贴板信息
      */
     onCopy: function (e) {
       alert('复制成功： ' + e.text)
     },
     one rror: function (e) {
       alert('复制失败')
     }
   }
 }
</script> 

方法二：

<template>
    <div>
    	<button type="button" @click="doCopy">复制QQ</button>
    </div>
</template>
 
<script>
export default {
    data() {
       return {
         qq: '123456'
       }
     },
     methods: {
       doCopy: function () {
          this.$copyText(this.qq).then(function (e) {
             alert('复制成功')
             console.log(e)
          }, function (e) {
              alert('复制失败')
              console.log(e)
          })
        }
     }
  }
</script> 

标签：function,剪贴板,Vue,vue,插件,alert,复制,clipboard2
来源： https://blog.csdn.net/weixin_44198965/article/details/121950564