npm install clipboard --save

import Clipboard from 'clipboard';

<template>
    <span class="copy" @click="onCopy">
        <i class="iconfont iconcopy"></i>
        <span>點(diǎn)擊復(fù)制</span>
    </span>
</template>

<script>
    methods: {
        onCopy(){
             let clipboard = new Clipboard('.copy')
             clipboard.on('success', e => {
               console.log('復(fù)制成功')
               // 釋放內(nèi)存
               clipboard.destroy()
             })
             clipboard.on('error', e => {
               // 不支持復(fù)制
               console.log('該瀏覽器不支持自動(dòng)復(fù)制')
               // 釋放內(nèi)存
               clipboard.destroy()
             })
           }
    }
</script>

<script>
    methods: {
        onCopy(){
            //創(chuàng)建一個(gè)input框
            const input = document.createElement("input")
            //將指定的DOM節(jié)點(diǎn)添加到body的末尾
            document.body.appendChild(input)
            //設(shè)置input框的value值為直播地址
            input.setAttribute("value", e)
            //選取文本域中的內(nèi)容
            input.select()
            //copy的意思是拷貝當(dāng)前選中內(nèi)容到剪貼板
            //document.execCommand（）方法操縱可編輯內(nèi)容區(qū)域的元素
            //返回值為一個(gè)Boolean，如果是 false 則表示操作不被支持或未被啟用
            if (document.execCommand("copy")) {
            document.execCommand("copy")
            }
            //刪除這個(gè)節(jié)點(diǎn)
            document.body.removeChild(input)
    }
</script>

onCopy() {
    navigator.clipboard.writeText(this.detailData.clientSecret).then(() => {
        this.$message.success('復(fù)制成功')
    })
}