vue 复制

第一步：下载clipboard

npm install clipboard --save

第二步：自建clipboard.js

import Clipboard from 'clipboard'
import {Toast} from 'mint-ui' //由于我在项目中用了mint-ui，你可以结合你的项目自行修改

function clipboardSuccess() {
    Toast('复制成功');
}

function clipboardError() {
    Toast('复制失败');
}

export default function handleClipboard(text, event) {
    const clipboard = new Clipboard(event.target, {
        text: () => text
    })
    clipboard.on('success', () => {
        clipboardSuccess()
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
    })
    clipboard.on('error', () => {
        clipboardError()
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
    })
    clipboard.onClick(event)
}

第三步：在页面中的运用

<template>
  <div>
        <div class="order-number">订单编号：
              <span>{{orderDetail.tradeNo}}</span>
             <div class="copy" @click="onCopyClick(orderDetail.tradeNo,$event)">
              <div class="text">复制</div>
             </div>
      </div>
</div>
</template>

<script>
  import clip from '@/utils/clipboard' ;
  //复制
  onCopyClick(copyContent,e){
        clip(copyContent,e);
   }
</script>