这两天写项目的时候有一个点击按钮复制文本的需求,完成之后把过程记录一下
首先是搜索有没有相关的现成的lib
搜索得到这个clipboardjs
这个库的具体用法也都写在官方文档中了,下面看在vue中如何集成这个库完成需求
template
<van-button
ref="copyBtn"
data-clipboard-text="要复制的文本">
点击复制
</van-button>
script
export default {
data() {
return {
token: '',
};
},
mounted() {
this.initClipboard();
},
methods: {
// 初始化复制插件
initClipboard() {
const clipboard = new Clipboard(this.$refs.copyBtn);
clipboard.on('success', () => {
Notify({ type: 'primary', message: '已将token复制到剪贴板,请在输入框中粘贴后登录' });
});
},
},
};
在methods中定义一个初始化这个插件的方法,然后在mounted()函数即页面挂载时调用即可
粘贴成功后会弹出通知
-EOF-