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>
相关推荐
請你喝杯Java1 小时前
【工具类】得到多个数组中的相同元素
开发语言·javascript
祈祷苍天赐我java之术3 小时前
CSS 进阶用法
前端·css
CodeCraft Studio5 小时前
PPT处理控件Aspose.Slides教程:在 C# 中将 PPTX 转换为 Markdown
开发语言·c#·powerpoint·markdown·ppt·aspose·ai大模型
萧鼎6 小时前
深入理解 Python Scapy 库:网络安全与协议分析的瑞士军刀
开发语言·python·web安全
2501_915106326 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
柯南二号7 小时前
【大前端】React Native 调用 Android、iOS 原生能力封装
android·前端·react native
阿拉丁的梦8 小时前
教程1:用vscode->ptvsd-创建和调试一个UI(python)-转载官方翻译(有修正)
开发语言·python
木宇(记得热爱生活)8 小时前
一键搭建开发环境:制作bash shell脚本
开发语言·bash
睡美人的小仙女1278 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
Cisyam^8 小时前
Go环境搭建实战:告别Java环境配置的复杂
java·开发语言·golang