1. 點選事件

<div>
  <van-icon name="cluster-o" @click="share" />
</div>

2. 顯示二維碼

<van-overlay :show="show" @click="show = false">
   <div class="wrapper">
       <div class="block">
          <p>分享</p>
          <div>
               <img :src="imrUrl" />
          </div>
      </div>
  </div>
</van-overlay>
 

3. js

  //生成二維碼需要下載一個qrcode外掛 
  //官網地址：https://www.npmjs.com/package/qrcode
  //下載外掛 npm install --save qrcode
  <script>
  //引入qrcode外掛
  import QRCode from 'qrcode'
  export default {
     data() {
        return {
            show: false,
            imrUrl: ""
        }
     },
     methods: {
       share() {
          this.show = true;
          let url = location.href;//獲取當前位址列的地址
          console.log(url);
          QRCode.toDataURL(url)
          .then(tpian => {
              console.log(tpian);
              this.imrUrl = tpian;
           })
          .catch(err => {
              console.error(err);
           });
       },
    }
 </script>
 

這樣點選分享的小圖示 就可以彈出一個二維碼了