uniapp开发 h5实现复制到剪贴板功能

由于uni.setClipboardData不支持h5，在浏览器运行会报以下错误：

此时，为了实现h5复制功能，我们可以用到这个的插件：vue-clipboard2

1. 安装 vue-clipboard2 依赖

npm install --save vue-clipboard2

2. 引入依赖

在main.js 引入vue-clipboard2

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

3. 页面上使用

（1）使用 this.$copyText()

 <view @click="copyEvent("111")">复制<view> 

copyEvent(e){
   this.$copyText(e).then((res) => {
        console.log(res);
        uni.showToast({
            title: "复制成功！",
            duration: 2000,
            icon: "none",
        });
   });
}

（2）使用指令 v-clipboard
 

<button v-clipboard:copy="111" v-clipboard:success="onSuccess" v-clipboard:error="onError"></button>