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>