Vue - 实现复制内容到剪贴板(一键复制)

前言

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

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

一、安装插件

在项目根目录,打开终端执行以下命令:

npm install --save vue-clipboard2

二、引入插件

打开项目 main.js 文件,添加以下代码:

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

如下图所示:
Vue - 实现复制内容到剪贴板(一键复制)

三、使用方法

如果想了解更多,请参考插件官网: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> 
上一篇:DOM操作


下一篇:淘宝网前端开发面试题