大佬教程收集整理的这篇文章主要介绍了uniapp-H5端使用vue-clipboard2复制内容至剪切板，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

由于uni.setClipboardData不支持H5，所以使用vue-clipboard2复制文本

 步骤如下：

1.安装插件

npm install --save vue-clipboard2

2.在 @H_319_5@main.js 中挂载插件

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

3.使用方法一： 自定义事件手动调用

<template>
  <div>
    <button class="btn"
        @click="onClick">复制内容</button>
  </div>
</template>
<script>
  export default {
    ...
    methods: {
      onClick(){
        this.$copyText('复制的文本').then(
          res => {
            console.log('复制成功')
          },
          err => {
            console.log('复制失败')
          }
        );
      }
    }
  }
</script>

4.在元素上直接监听使用

<template>
  <div>
    <button class="btn"
      v-clipboard:copy="'复制的内容'"
      v-clipboard:success="onsuccess" 
      v-clipboard:error="onError">复制内容</button>
  </div>
</template>
<script>
  export default {
    ...
    methods: {
      onsuccess: function (res) {
        console.log('复制成功')
      },
      onError: function (err) {
        console.log('复制失败')
      }
    }
  }
</script>

大佬总结

以上是大佬教程为你收集整理的uniapp-H5端使用vue-clipboard2复制内容至剪切板全部内容，希望文章能够帮你解决uniapp-H5端使用vue-clipboard2复制内容至剪切板所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。