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>
相关推荐
码力码力我爱你8 分钟前
C++性能基准测试
开发语言·c++
张人玉11 分钟前
C#WPF——MVVM框架编写管理系统所遇到的问题
开发语言·c#·wpf·mvvm框架
越努力越幸运50818 分钟前
npm常见问题解决
前端·npm·node.js
Wild~~19 分钟前
electron-vite
前端·javascript·electron
by__csdn24 分钟前
Electron+Vite:实现electron + vue3 + ts + pinia + vite高效跨平台开发指南
前端·javascript·vue.js·typescript·electron·node.js·vue
国服第二切图仔25 分钟前
Electron 鸿蒙pc开发环境搭建完整保姆级教程(window)
javascript·electron·harmonyos
马达加斯加D26 分钟前
C# --- 如何写UT
前端·c#·log4j
java1234_小锋30 分钟前
讲讲Mybatis的一级、二级缓存?
java·开发语言·mybatis
yqcoder40 分钟前
在 scss 中,&>div 作用
前端·css·scss
小马哥编程1 小时前
这个variables.scss文件中$menuText:#bfcbd9;:export {menuText: $menuText; }的语法符合要求吗
前端·css·scss