前言
写毕设时候有这样一个需求,我需要点击按钮复制输入框里面的内容,如下图所示:
那么我们该如何来实现呢?想到利用clipboard插件来实现,let’s do it
步骤
那我们一步一步来:
- 因为是在vue里面集成,我们先下好这个clipboard插件,输入以下命令即可完成安装
npm install clipboard --save
如图所示,安装成功
- 在你要使用的vue文件里导入clipboard,输入以下代码:
import Clipboard from 'clipboard';
如图所示,在你的scrip区域导入
- 现在我们就来编写代码,template区的:一个输入框、一个按钮,然后再实现copy方法,如下所示:
<el-dialog
title="分享"
:visible.sync="centerDialogVisible"
width="30%"
>
<div class="demo-image" align="center">
<div class="block" >
<el-image
style="width: 150px; height: 150px"
:src="codeUrl"
:fit="fit"></el-image>
</div>
<div class="demonstration">手机扫描二维码</div>
<span class="demonstration">分享给好友</span>
</div>
<div style="margin-top: 20px;">
<div style="display:inline-block">分享地址:</div>
<div style="display:inline-block">
<el-input v-model="shareLink"
:data-clipboard-text="shareLink"
id="copy_link"
class="input-with-select"
style="width: 155%;">
<el-button slot="append"
class="cpoy-input"
icon="el-icon-copy-document"
style="color: #fff;background-color: #409eff;"
@click="copy" data-clipboard-action="copy" data-clipboard-target="#copy_link">
复制
</el-button>
</el-input>
</div>
</div>
</el-dialog>
重点如图所示:
然后,我们来实现copy方法:
copy(){
var clipboard = new Clipboard('.input-with-select')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
}
结果
最后,我们来验证一下是否成功(PS:当初踩了一些坑)
还是熟悉的页面,我们来点击复制按钮
可以看到,这个状态已经是复制成功了
然后,在控制台粘贴一下
可以看到已经成功实现该功能了,如果对你有帮助的话点个赞吧!