本篇文章為大家展示了使用VUE怎么復(fù)制內(nèi)容到剪貼板,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
創(chuàng)新互聯(lián)建站客戶idc服務(wù)中心,提供大邑服務(wù)器托管、成都服務(wù)器、成都主機托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心,我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務(wù),資深網(wǎng)絡(luò)工程師在機房提供7*24小時標(biāo)準(zhǔn)級技術(shù)保障。
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
第一種方式與大多數(shù)文章類似,只粘貼代碼:
<template> <div class="container"> <input type="text" v-model="message"> <button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">Copy!</button> </div> </template> <script> export default { data() { return { message: 'Copy These Text', } }, methods: { onCopy: function (e) { alert('You just copied: ' + e.text) }, onError: function (e) { console.log(e) alert('Failed to copy texts') } } } </script>
這種使用方式直接將變量內(nèi)容復(fù)制至剪切板,暫時沒有找到處理數(shù)據(jù)后再復(fù)制的方式,這時就需要使用第二種方式。
第二種方式:
<template> <div class="container"> <input type="text" v-model="message"> <button type="button" @click="doCopy('add me!')">Copy!</button> </div> </template> <script> export default { data() { return { message: 'Copy These Text' } }, methods: { dataProcessing (val) { this.message = this.message + ' ' + val }, doCopy: function (val) { this.dataProcessing(val) this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) }, function (e) { alert('Can not copy') console.log(e) }) } } } </script>
通過這段示例代碼能看到,復(fù)制動作使用的是VUE響應(yīng)函數(shù)方式,這就為復(fù)制前控制數(shù)據(jù)提供了可能!
下面在看下vue實現(xiàn)復(fù)制內(nèi)容到剪貼板功能,具體內(nèi)容如下所示:
注: 依賴第三方插件 clipboard
一、安裝插件
npm install vue-clipboard2 --save
二、全局注入(main.js)
import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)
三、使用
<ul class="file-list"> <li v-for="(f, index) of files" :key="index"> <span>[文件{{index + 1}}] {{f}}</span> <span class="copy-btn" v-clipboard:copy="f" v-clipboard:success="onCopy" v-clipboard:error="onError">復(fù)制</span> </li> </ul> // 復(fù)制成功時的回調(diào)函數(shù) onCopy (e) { this.$message.success("內(nèi)容已復(fù)制到剪切板!") }, // 復(fù)制失敗時的回調(diào)函數(shù) onError (e) { this.$message.error("抱歉,復(fù)制失??!") }
四、效果圖
上述內(nèi)容就是使用VUE怎么復(fù)制內(nèi)容到剪貼板,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前名稱:使用VUE怎么復(fù)制內(nèi)容到剪貼板
轉(zhuǎn)載源于:http://muchs.cn/article22/gdcgcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)