在VUE中封裝全局方法實(shí)現(xiàn)文本復(fù)制(copy)

定義全局方法、并掛載:找到main.js,封裝function,并且掛載到vue原型上(prototype)

Vue.prototype.copy=function (id) {
    // 創(chuàng)建input框
    var input = document.createElement("input");
    input.value = id;  // 將調(diào)用方法穿入進(jìn)來的值賦給input
    document.body.appendChild(input);  // 將input添加到body中
    input.select(); // 選中文本
    document.execCommand("copy");  // 調(diào)用瀏覽器復(fù)制方法、復(fù)制成功
    this.$message({  // 利用element彈出成功提示
        type: 'success',
        message: '復(fù)制成功'
    });
    input.remove();  // 成功后刪除input,防止影響其他元素
}

在組建中通過this調(diào)用方法:在任一組建中都可使用

<span @click="copy(傳入復(fù)制的內(nèi)容)">點(diǎn)我復(fù)制</span>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容