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>
相关推荐
数据服务生几秒前
五子棋-html版本
前端·html
问今域中1 分钟前
java技术史001:EJB 侵入性的历史阵痛与 Spring 的突围
java·开发语言·rpc
BUG创建者3 分钟前
openlayers上跟据经纬度画出轨迹
开发语言·javascript·vue·html
23.5 分钟前
【Java】NIO零拷贝技术揭秘:CPU不参与的数据传输
java·开发语言·nio
宸津-代码粉碎机5 分钟前
SpringBoot 任务执行链路追踪实战:TraceID 透传全解析,实现从调度到执行的全链路可观测
开发语言·人工智能·spring boot·后端·python
IT_陈寒8 分钟前
SpringBoot项目启动速度提升300%?这5个隐藏配置太关键了!
前端·人工智能·后端
小碗细面9 分钟前
5 分钟上手 Claude 自定义 Subagents
前端·人工智能·ai编程
漫随流水9 分钟前
HTML和CSS和JavaScript的区别
javascript·css·html
茉莉玫瑰花茶10 分钟前
CMake 工程指南 - 工程场景(5)
开发语言·c++·cmake
小J听不清14 分钟前
CSS 浮动(float)全解析:布局 / 文字环绕 / 清除浮动
前端·javascript·css·html·css3