vue二次元コード長は保存とコピーを押して操作します。
効果図:
QRコードはQRCode.vueを使いました。
npm install qrcectode.vue--save
コピー内容はvue-clipboard 2を使っています。
npm install vue-clipboard 2--save
1.QRコード保存機能:
長押し保存機能は、長押しに画像を1枚追加し、この画像のopacityを0に設定すればいいです。
アナログaタグをクリックしてダウンロードする方法はWeChatで問題があります。
let myCanvas=document.getElemenntById.getElementsByTagName('canvas')[0];
this.qrceode ImgSrc=myCanvas.toData URL('mage/png')
2.ボタンをクリックし、貼り付け機能をコピーする:
1.据え付け
npm install qrceode--save
2.ページの導入と使用
[img]Src=“”のラベルを利用して、二次元コード写真機能を実現します。長押しして保存すればいいです。
QRコードはQRCode.vueを使いました。
npm install qrcectode.vue--save
コピー内容はvue-clipboard 2を使っています。
npm install vue-clipboard 2--save
1.QRコード保存機能:
<div class="qrcode">
<qrcode-vue
:size="qrcodeSize"
:value="shareUrl"
id="picture"
></qrcode-vue>
</div>
<div class="btn">
<img :src="qrcodeImgSrc" class="qrcode-img"/>
</div>
なお、qrceode.vueはcanvasをレンダリングしており、canvasはtoData URL方式でpngピクチャに変換できます。長押し保存機能は、長押しに画像を1枚追加し、この画像のopacityを0に設定すればいいです。
アナログaタグをクリックしてダウンロードする方法はWeChatで問題があります。
let myCanvas=document.getElemenntById.getElementsByTagName('canvas')[0];
this.qrceode ImgSrc=myCanvas.toData URL('mage/png')
2.ボタンをクリックし、貼り付け機能をコピーする:
<div class="copy">
<span>{{shareUrl}}</span>
<span @click="doCopy"> </span>
</div>
doCopy() {
this.$copyText(this.shareUrl).then(function (e) {
alert('Copied')
console.log(e)
}, function (e) {
alert('Can not copy')
console.log(e)
})
}
補足知識:vueプラグインqrcodeは携帯端末の二次元コード保存機能を実現します。1.据え付け
npm install qrceode--save
2.ページの導入と使用
[img]Src=“”のラベルを利用して、二次元コード写真機能を実現します。長押しして保存すればいいです。
<template>
<div class="qrcode">
<canvas id="canvas" style="display:none"></canvas>
<img :src="imgUrl"/>
<p> </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二次元コードは保存と複製の内容によって操作します。小編集は皆さんに全部の内容を共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。