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>
相关推荐
a程序小傲1 分钟前
京东Java面试被问:RPC调用的熔断降级和自适应限流
java·开发语言·算法·面试·职场和发展·rpc·边缘计算
独自破碎E4 分钟前
MyBatis Flex和MyBatis Plus的区别
java·开发语言·mybatis
Jinuss15 分钟前
源码分析之React中ReactDOMRoot实现
前端·javascript·react.js
摘星编程20 分钟前
React Native鸿蒙版:React Query无限滚动
javascript·react native·react.js
无心水23 分钟前
微服务架构下Dubbo线程池选择与配置指南:提升系统性能与稳定性
java·开发语言·微服务·云原生·架构·java-ee·dubbo
web守墓人24 分钟前
【前端】vue3的指令
前端
Chan1626 分钟前
《Java并发编程的艺术》| 并发关键字与 JMM 核心规则
java·开发语言·数据库·spring boot·java-ee·intellij-idea·juc
期待のcode36 分钟前
线程睡眠sleep方法
java·开发语言
gjxDaniel37 分钟前
Bash编程语言入门与常见问题
开发语言·bash
zhooyu38 分钟前
OpenGL 与 C++:深入理解与实现 Transform 组件
开发语言·c++