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>
相关推荐
信仰_273993243几秒前
Java面试题
java·开发语言
答案answer11 分钟前
一些经典的3D编辑器开源项目
前端·开源·three.js
闫有尽意无琼20 分钟前
银河麒麟v11 arm编译Qt creator8.0.2报错
开发语言·qt
亿元程序员27 分钟前
Creator都快4.0了,怎么能没有这样的功能?
前端
q***649729 分钟前
SpringMVC 请求参数接收
前端·javascript·算法
小此方32 分钟前
从零开始手搓堆:核心操作实现 + 堆排序 + TopK 算法+ 向上调整 vs 向下调整建堆的时间复杂度严密证明!
开发语言·数据结构·算法
万少33 分钟前
流碧卡片 6 小时闪电开发 AI gemini-3-pro-preview ! 秒出小红书爆款图,免下载直接用
前端·后端·ai编程
_OP_CHEN43 分钟前
从零开始的Qt开发指南:(五)Qt 常用控件之 QWidget(上):解锁 Qt 界面开发的核心基石
开发语言·c++·qt·前端开发·qwidget·gui开发·qt常用控件
向葭奔赴♡44 分钟前
若依系统权限控制全流程解析
前端·javascript·vue.js·ruoyi·navicat
wjs20241 小时前
SQLite 视图
开发语言