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>
相关推荐
FinClip3 分钟前
京东外卖App独立上线,超级App如何集成海量小程序?
前端
一颗苹果OMG7 分钟前
随着AI的发展,测试跟prompt会不会成为每个程序员的必修课
前端·程序员·全栈
起这个名字9 分钟前
Webpack——插件实现的理解
前端·javascript·node.js
x***J34812 分钟前
后端服务限流算法,计数器与滑动窗口
java·开发语言
Mapmost16 分钟前
让 AI 真正看懂世界—构建具备空间理解力的智能体
前端
橙 子_32 分钟前
我本以为代码是逻辑,直到遇见了HTML的“形”与“意”【一】
前端·html
二川bro36 分钟前
第51节:Three.js源码解析 - 核心架构设计
开发语言·javascript·ecmascript
Kisang.37 分钟前
【HarmonyOS】ArkWeb——从入门到入土
前端·华为·typescript·harmonyos·鸿蒙
-大头.40 分钟前
响应式编程实战:WebFlux与RSocket深度解析
java·开发语言
沉默璇年43 分钟前
tgz包批量下载脚本
前端