由于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>
uniapp-H5端使用vue-clipboard2复制内容至剪切板
原文:https://www.cnblogs.com/zhijie1/p/14690381.html