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>
相关推荐
小村儿1 分钟前
(译文)重温:Karpathy 的 4 条 CLAUDE.md 规则将 Claude 错误率从 41% 降至 11%——历经 30 个代码库后,我又加了 8 条
前端·后端·ai编程
我滴老baby3 分钟前
0基础速通Python+AI|2026热门轻量化玩法全攻略:从入门到实战,3天搞定AI应用开发
开发语言·人工智能·python
前端那点事3 分钟前
Vite+Vue3环境判断终极解法!区分开发/生产环境,告别环境报错
前端·vue.js
源码集结号5 分钟前
基于 Spring Boot + JPA + MySQL的上门家政系统代码示例
java·前端·后端
一个天蝎座 白勺 程序猿6 分钟前
Python(29)Python生成器函数深度解析:asyncio事件循环的底层实现与异步编程实战
开发语言·python
2zcode6 分钟前
原创文档:基于MATLAB的线性预测编码变声器系统
开发语言·matlab·语音识别
七夜zippoe6 分钟前
Python RESTful API设计终极指南:从理论到企业级实战
开发语言·python·http·pandas·restful api
爱喝铁观音的谷力景辉8 分钟前
web端实现音频波形分析以及音频截取
前端
lly2024069 分钟前
Highcharts 配置说明
开发语言
车位涂鸦11 分钟前
在线浏览“秀人网合集”的新思路:30 行 Python 把封面图链接秒变本地可点图库
开发语言·python