vue生成二维码分享功能

vue生成二维码分享功能

生成二维码听起来很难，其实也很简单

先看一下效果：

效果就是这个样子

首先给要分享的dom一个点击触发事件

 <!-- 分享 -->
      <div class="rightimg" @click="share">
        <img src="../assets/img/share.png" />
      </div>

然后在vant-ui框架里找到合适组件 （遮罩层）

直接复制过去就可以，不要的东西删掉

 <!-- vant引入遮罩层，生成二维码 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block">
          <p>分享</p>
          <div>
          //存放二维码的图片
            <img :src="imgUrl" />
          </div>
        </div>
      </div>
    </van-overlay>

在data里面定义状态和图片位置：

data() {
    return {
      // 控制遮罩层显示隐藏
      show:false,
      // 图片路径
      imgUrl:""
    };
  },

这一步操作完成之后，然后下载一个生成二维码的插件

生成二维码插件的地址链接

打开链接

上面说得很清楚 直接下载

npm install --save qrcode

使用方法：

import QRCode from 'qrcode'  //在哪使用就在哪引用
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

toDataURL方法是生成二维码的 后面跟你要生成二维码的路径

知道这个以后 开始写我们的分享方法

// 分享
    share() {
    //点击显示遮罩层
      this.show = true;
      //获取当前地址栏的地址
      let url = location.href;
      console.log(url);  
      //把当前地址栏的路径放到toDataURL后面，就会生成二维码
      QRCode.toDataURL(url)
        .then(img => {
          console.log(img);
          //把生成的二维码赋值给上面定义好的imgUrl	
          this.imgUrl = img;
        })
        //错误返回信息
        .catch(err => {
          console.error(err);
        });
    }

可以看我打印出的东西是什么

这样就没问题了