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>
相关推荐
AC赳赳老秦3 分钟前
OpenClaw二次开发实战:编写专属办公自动化技能,适配个性化需求
linux·javascript·人工智能·python·django·测试用例·openclaw
旷世奇才李先生4 分钟前
Vue 3\+Vite\+Pinia实战:企业级前端项目架构设计
前端·javascript·vue.js
Ulyanov1 小时前
《PySide6 GUI开发指南:QML核心与实践》 第二篇:QML语法精要——构建声明式UI的基础
java·开发语言·javascript·python·ui·gui·雷达电子对抗系统仿真
码界筑梦坊1 小时前
357-基于Java的大型商场应急预案管理系统
java·开发语言·毕业设计·知识分享
anzhxu1 小时前
Go基础之环境搭建
开发语言·后端·golang
聚美智数1 小时前
企业实际控制人查询-公司实控人查询
android·java·javascript
yu85939582 小时前
基于MATLAB的随机振动仿真与分析完整实现
开发语言·matlab
SoaringHeart2 小时前
Flutter进阶:用OverlayEntry 实现所有弹窗效果
前端·flutter
赵钰老师2 小时前
【结构方程模型SEM】最新基于R语言结构方程模型分析
开发语言·数据分析·r语言
guygg882 小时前
利用遗传算法解决列车优化运行问题的MATLAB实现
开发语言·算法·matlab