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>
相关推荐
灵感__idea2 小时前
Hello 算法:贪心的世界
前端·javascript·算法
小成202303202653 小时前
Linux高级02
linux·开发语言
知行合一。。。3 小时前
Python--04--数据容器(总结)
开发语言·python
咸鱼2.03 小时前
【java入门到放弃】需要背诵
java·开发语言
ZK_H3 小时前
嵌入式c语言——关键字其6
c语言·开发语言·计算机网络·面试·职场和发展
A.A呐3 小时前
【C++第二十九章】IO流
开发语言·c++
椰猫子3 小时前
Java:异常(exception)
java·开发语言
lifewange3 小时前
pytest-类中测试方法、多文件批量执行
开发语言·python·pytest
GreenTea3 小时前
一文搞懂Harness Engineering与Meta-Harness
前端·人工智能·后端
cmpxr_4 小时前
【C】原码和补码以及环形坐标取模算法
c语言·开发语言·算法