有時業務需求是需要點擊按鈕複製相關內容。如下圖:
推薦一個插件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()
})
},
實現結果如圖: