Vue生成二维码_后端生成二维码还是前端

大家好，又见面了，我是你们的朋友全栈君。

vue生成二维码分享功能

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

先看一下效果：

效果就是这个样子

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

 <!-- 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里面定义状态和图片位置：

代码语言：javascript复制

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

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

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

打开链接

上面说得很清楚 直接下载

npm install –save qrcode

使用方法：

代码语言：javascript复制

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

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

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

代码语言：javascript复制

// 分享
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);
});
}

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

这样就没问题了

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

npm data ui url 二维码

0 人点赞