Vue项目中实现点击复制

Vue项目中实现点击复制

描述：想要实现一个功能，用户点击某段话即可将该段文字复制到粘贴板

解决：使用Clipboard

1. 安装Clipboard

   npm install clipboard --save
   

2. 封装Clipboard

   import Vue from 'vue'
   import Clipboard from 'clipboard'
   
   function clipboardSuccess() {
       Vue.prototype.$message({
           //window.vm.$t() 为i18n国际化
           message: window.vm.$t('copy.successMsg'),
           type: 'success',
           duration: 1500
       })
   }
   
   function clipboardError() {
       Vue.prototype.$message({
           message: window.vm.$t('copy.errorMsg'),
           type: 'error'
       })
   }
   
   export default function handleClipboard(text, event) {
       const clipboard = new Clipboard(event.target, {
           text: () => text
       })
       clipboard.on('success', () => {
           clipboardSuccess()
           clipboard.destroy()
       })
       clipboard.on('error', () => {
           clipboardError()
           clipboard.destroy()
       })
       clipboard.onClick(event)
   }
   

3. 在项目中使用

   copy
   

   import clip from '@/utils/clipboard' // use clipboard directly
   
   methods: {
     handleCopy(text, event) {
       clip(text, event)
     }
   }