标签：function 剪贴板 Vue vue 插件 alert 复制 clipboard2

前言

如果需要原生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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。