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>
相关推荐
代数狂人14 分钟前
Java泛型深度解析(JDK23)
java·开发语言
遗憾皆是温柔15 分钟前
JavaFX - 3D 形状
java·开发语言·ide·学习·3d
Orange3015112 小时前
深入剖析Electron的原理
前端·javascript·electron
大模型铲屎官2 小时前
掌握 HTML5 多媒体标签:如何在所有浏览器中顺利嵌入视频与音频
前端·html·音视频·html5·多媒体标签
爱编程的鱼2 小时前
HTML5教程之标签(2)
前端·html·html5
美味小鱼2 小时前
Rust场景示例:为什么要使用切片类型
开发语言·rust
大模型铲屎官3 小时前
告别页面刷新!如何使用AJAX和FormData优化Web表单提交
前端·javascript·ajax·html·编程·页面刷新·表单提交
LUCIAZZZ3 小时前
手写单例模式
java·开发语言·spring boot·单例模式
程序员东min4 小时前
C++:抽象类习题
开发语言·c++
无限大.6 小时前
前端知识速记--HTML篇:src和href
前端·html