经查询clipboard实现基础为事件委托机制,与事件冒泡为强依赖。
<template>
<div id="copy_code"></div>
<van-overlay :show="show" @click="show = false">
<div class="wrapper" @click.stop>
<div class="btn flex flex_main_center flex_cross_center" @click="copy(code)">复制兑换码,去领取奖品</div>
</div>
</van-overlay>
</template>
<script>
import Clipboard from "clipboard";
export default {
data() {
return {
code: "xxxxxx",
};
},
methods: {
// 复制兑换码
copy(value) {
// 解决.stop无法复制问题 模拟点击事件
this.$nextTick(() => {
document.getElementById('copy_code').click();
});
let clipboard = new Clipboard("#copy_code", {
container: document.getElementById('copy_code'),
text: function (trigger) {
//返回字符串
return value;
},
});
clipboard.on("success", (e) => {
//复制成功
this.$toast("复制兑换码成功,去领取奖品");
this.show = false;
clipboard.destroy();
});
clipboard.on("error", (e) => {
//复制失败
clipboard.destroy();
});
},
},
};
</script>