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>
相关推荐
Mr.wangh2 分钟前
单例模式&阻塞队列详解
java·开发语言·单例模式·多线程·阻塞队列
JarvanMo3 分钟前
Flutter CI/CD 完整指南:从 Bitbucket Pipelines 到 Play Store 自动化部署
前端
工业甲酰苯胺3 分钟前
TypeScript 中的单例模式
javascript·单例模式·typescript
nvd1110 分钟前
Lit.js 入门介绍:与 React 的对比
开发语言·javascript·react.js
JarvanMo11 分钟前
Flutter3.38 带来了什么
前端
倚栏听风雨26 分钟前
React中useCallback
前端
不说别的就是很菜28 分钟前
【前端面试】前端工程化篇
前端·面试·职场和发展
张较瘦_32 分钟前
[论文阅读] 软件工程 | 解决Java项目痛点:DepUpdater如何平衡依赖升级的“快”与“稳”
java·开发语言·论文阅读
亿元程序员39 分钟前
微信小游戏包体限制4M,一个字体就11.24M,怎么玩?
前端
涔溪40 分钟前
vue中预览pdf文件
前端·vue.js·pdf