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>
相关推荐
kyle~1 小时前
Python---Flask 轻量级Web框架
开发语言·python·flask
云深处@1 小时前
【C++11】特殊类&&单例模式
开发语言·c++
烟花落o1 小时前
算法的时间复杂度和空间复杂度
开发语言·数据结构·笔记·算法
cc.ChenLy1 小时前
【CSS进阶】毛玻璃效果与代码解析
前端·javascript·css
何中应1 小时前
使用Jenkins部署前端项目(Vue)
前端·vue.js·jenkins
西门吹-禅1 小时前
node js 性能处理
开发语言·javascript·ecmascript
我不是8神1 小时前
go-zero微服务框架总结
开发语言·微服务·golang
3秒一个大2 小时前
JWT 登录:原理剖析与实战应用
前端·http·代码规范
一只大侠的侠2 小时前
React Native for OpenHarmony:日期范围选择器实现
javascript·react native·react.js
NEXT062 小时前
2026 技术风向:为什么在 AI 时代,PostgreSQL 彻底成为了全栈工程师的首选数据库
前端·数据库·ai编程