美文网首页vue
vue-clipboard2 实现复制粘贴

vue-clipboard2 实现复制粘贴

作者: 一只正在成长的程序猿 | 来源:发表于2019-07-26 10:58 被阅读61次

1.先下载vue-clipboard2

cnpm install vue-clipboard2 --save-dev

2.在main.js引入配置

// 复制到粘贴板插件
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)

3.在组件里面的用法

html
<!--v-clipboard:copy="要复制的内容"-->
<!-- v-clipboard:success="onCopy",复制成功执行的函数-->
<!--v-clipboard:error="onError",复制失败执行的函数-->
<div class="footerButton copyBank" v-clipboard:copy="b.BankNo" v-clipboard:success="onCopy" v-clipboard:error="onError">
                    {{$t("m.recharge.copyBank")}}
</div>

js
//复制成功执行的函数
onCopy(e) {
    this.isShowCopy=true;
    this.showCopyResult=this.$t("m.recharge.copySuccess");
    },
//复制失败执行的函数
onError(e) {
    this.isShowCopy=true;
    this.showCopyResult=this.$t("m.recharge.copyFail");
},

参考链接

相关文章

网友评论

    本文标题:vue-clipboard2 实现复制粘贴

    本文链接:https://www.haomeiwen.com/subject/sakrrctx.html