js 生成二维码

第一种,需要先下载包 npm install qrcode

javascript 复制代码
<template>
  <div>
    <h2>二维码</h2>
    <img :src="qrCodeImage" alt="">
  </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  data () {
    return {
      qrCodeImage: ''
    }
  },
  created () {
    this.generateQRCode('https://element.eleme.cn/#/')
  },
  methods: {
    async generateQRCode (url) {
      const opts = { errorCorrectionLevel: 'H' }
      this.qrCodeImage = await QRCode.toDataURL(url, opts)
    }
  }
}
</script>

<style>
</style>

第二种不需要下载包,只需要改'data='后面的地址

javascript 复制代码
<template>
  <div>
    <h2>二维码</h2>
    <img src='https://api.qrserver.com/v1/create-qr-code?data=https://element.eleme.cn/#/'>
  </div>
</template>


<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style>
</style>
相关推荐
TANGLONG2223 分钟前
【C++】STL基础必备:深入解析vector容器的实现(含源码)
c语言·开发语言·数据结构·c++·笔记·算法·stl
50万马克的面包8 分钟前
C语言第3讲:分支和循环
c语言·开发语言·笔记·算法
ytttr8739 分钟前
惯性导航精解算程序(MATLAB实现)
开发语言·matlab
艺杯羹10 分钟前
从零搭建CSDN博客爬虫:Python爬虫+多格式导出完整教程
开发语言·爬虫·python·开源·gui·csdn
宁雨桥11 分钟前
AI前端开发面试题分享
前端·人工智能·ai
亿元程序员11 分钟前
求求你别卷了,主管又转发你的文章到工作群了...我看了之后五味杂陈,决定卷个毛线!
前端
码农小韩13 分钟前
QT学习记录(三)——C++学习基础(三)
开发语言·c++·qt·学习·算法·嵌入式软件
buhuizhiyuci15 分钟前
【QT-百日筑基篇】找寻安静的落脚处,选择合适的功法进行修炼-QT深度了解对象树的特性
开发语言·qt
wjs202416 分钟前
jQuery Mobile 触摸事件详解
开发语言