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>