背景
在项目中我们有时候需要实现文字复制到用户剪贴板的功能，供用户粘贴或者存储，比如，银行卡号等私密信息展示不能完整的展示，前端会在银行卡号等私密信息中，只展示一部分，另一部分用 “ *** ”代替，（如银行卡号前端是展示6916 4008 ** **** **1782），而要实现复制真实银行卡号到剪贴板，去支付宝，微信进行绑卡操作的功能，这就可以利用 vue-clipboard2 实现vue项目的复制功能
安装vue-clipboard2
npm i vue-clipboard2 -S
main.js中引入
import Vue from 'vue'; import App from './App'; import router from './router'; import store from './store'; import VueClipboard from 'vue-clipboard2'; // 引入vue-clipboard2 Vue.use(VueClipboard); window.vm = new Vue({ el: '#app', router, store, components: { App }, template: '<App/>', });
组件中使用vue-clipboard2
<template> <div class="btn" v-clipboard:copy="eacctNo" v-clipboard:success="onCopy" v-clipboard:error="onCopyError" > 复制卡号并绑定微信支付宝 </div> </template> <script> export default { name: 'Copy', data() { return { eacctNo: '', // 要复制的文字 }; }, methods: { // 复制成功 onCopy() { this.copySuccess = true; setTimeout(() => { this.copySuccess = false; }, 2000); }, // 复制失败 onCopyError() { this.$bus.$emit('showPopup', { name: 'tip', data: '卡号复制失败，请手动保存', }); }, }, }; </script> <style lang="less" scoped> </style>
