vue分享二维码

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>

这样点击分享的小图标 就可以弹出一个二维码了