uniapp-H5端使用vue-clipboard2复制内容至剪切板

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

 

 步骤如下：

1.安装插件

npm install --save vue-clipboard2

2.在 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>