有时业务需求是需要点击按钮复制相关内容。如下图:
推荐一个插件clipboardjs 实现复制功能插件
使用步骤:
1:安装
yarn add clipboard
// 或者
npm install clipboard --save
2:在需要使用复制功能的页面引入
import Clipboard from 'clipboard'
3,使用
<div>
<span> {{ text }} </span>
<span
class="copy-btn iconfont icon-fuzhi"
:data-clipboard-text="text"
@click="copy"
/>
</div>
copy(){
let vm = this
let clipboard = new Clipboard('.copy-btn ')
clipboard.on('success',(e)=>{
console.log(e)
vm.$hips.toast({
message:'复制成功',
})
clipboard.destroy()
})
clipboard.on('error',()=>{
console.log('复制失败')
clipboard.destroy()
})
},
实现结果如图: