vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作
效果圖：
二維碼用了 qrcode.vue
npm install qrcode.vue --save
復(fù)制內(nèi)容用了 vue-clipboard2
npm install vue-clipboard2 --save
1.二維碼保存功能：
<div class="qrcode">
<qrcode-vue
:size="qrcodeSize"
:value="shareUrl"
id="picture"
></qrcode-vue>
</div>
<div class="btn">
長(zhǎng)按保存至相冊(cè)
<img :src="qrcodeImgSrc" class="qrcode-img"/>
</div>
注意，qrcode.vue渲染的是一個(gè)canvas,canvas可以通過toDataURL方法轉(zhuǎn)換為png圖片。
長(zhǎng)按保存功能是在長(zhǎng)按上加一張圖片，設(shè)置這張圖片的opacity為0即可。
模擬a標(biāo)簽點(diǎn)擊下載的方法在微信上有問題。
let myCanvas = document.getElementById('picture').getElementsByTagName('canvas')[0];
this.qrcodeImgSrc = myCanvas.toDataURL('image/png');
2.點(diǎn)擊按鈕，復(fù)制粘貼功能：
<div class="copy">
<span>{{shareUrl}}</span>
<span @click="doCopy">復(fù)制</span>
</div>
doCopy() {
this.$copyText(this.shareUrl).then(function (e) {
alert('Copied')
console.log(e)
}, function (e) {
alert('Can not copy')
console.log(e)
})
}
補(bǔ)充知識(shí)：vue插件qrcode實(shí)現(xiàn)手機(jī)端二維碼保存功能
1.安裝
npm install qrcode --save
2.頁(yè)面引入并使用
利用<img src="">標(biāo)簽，實(shí)現(xiàn)二維碼圖片功能。然后長(zhǎng)按保存即可。
<template>
<div class="qrcode">
<canvas id="canvas" style="display:none"></canvas>
<img :src="imgUrl"/>
<p>長(zhǎng)按保存二維碼圖片</p>
</div>
</template>
import QRCode from 'qrcode'
export default {
data() {
return {
codes: '',
imgUrl:''
}
},
components: {
QRCode: QRCode
},
methods: {
useqrcode() {//生成二維碼
let canvas = document.getElementById('canvas')
let url="http://www.baidu.com"
QRCode.toCanvas(canvas, url, function(error) {
if (error) { console.error(error) } else { console.log('success!'); }
})
this.saveImg()//保存圖片
},
//保存圖片
saveImg(){
let myCanvas = document.getElementsByTagName('canvas');
this.imgUrl=myCanvas[0].toDataURL('image/png')
},
},
mounted() {
this.useqrcode(); //生成二維碼
}
}
</script>
以上這篇vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟
這篇文章主要介紹了如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Vue學(xué)習(xí)筆記進(jìn)階篇之多元素及多組件過渡
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之多元素及多組件過渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue 解除鼠標(biāo)的監(jiān)聽事件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
webpack4+Vue搭建自己的Vue-cli項(xiàng)目過程分享
這篇文章主要介紹了webpack4+Vue搭建自己的Vue-cli，對(duì)于vue-cli的強(qiáng)大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻,感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
一般在vue項(xiàng)目開發(fā)中，事件的處理邏輯一般很復(fù)雜，我們可以將處理的邏輯變成函數(shù)，在vue開發(fā)中，一般使用的是使用的是v-on指令進(jìn)行事件的監(jiān)聽，事件監(jiān)聽的過程中觸發(fā)相應(yīng)的JavaScript代碼2022-08-08
vue如何實(shí)現(xiàn)接口統(tǒng)一管理
這篇文章主要介紹了vue如何實(shí)現(xiàn)接口統(tǒng)一管理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）
vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）2022-12-12
vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法(使用c3平滑屬性實(shí)現(xiàn))
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法，這段代碼主要使用c3平滑屬性實(shí)現(xiàn),需要的朋友可以參考下2019-12-12