vue二次元コード長は保存とコピーを押して操作します。


効果図:

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二次元コードは保存と複製の内容によって操作します。小編集は皆さんに全部の内容を共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。