vue中使用vue-clipboard2实现文字复制到剪贴板
背景
在项目中我们有时候需要实现文字复制到用户剪贴板的功能，供用户粘贴或者存储，比如，银行卡号等私密信息展示不能完整的展示，前端会在银行卡号等私密信息中，只展示一部分，另一部分用 “ *** ”代替，（如银行卡号前端是展示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>
