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>
相关推荐
CF14年老兵6 分钟前
5 个最佳工具,可立即从代码生成 API 文档
前端·后端·api
♡喜欢做梦11 分钟前
HTML 与 CSS:从 “认识标签” 到 “美化页面” 的入门指南
前端·html
前端小巷子20 分钟前
Vue脚手架模式与环境变量
前端·vue.js·面试
CF14年老兵26 分钟前
99% 的前端开发者忽略了这个 React 性能利器
前端·react.js·trae
zhysunny28 分钟前
Python从入门到精通计划Day07: Python数据卷轴术:文件魔法与防御结界全指南
开发语言·python
##学无止境##2 小时前
深入剖析Java线程:从基础到实战(上)
java·开发语言·redis
麓殇⊙3 小时前
redis--黑马点评--用户签到模块详解
前端·数据库·redis
大雷神4 小时前
站在JS的角度,看鸿蒙中的ArkTs
开发语言·前端·javascript·harmonyos
Bdygsl5 小时前
前端开发:JavaScript(3)—— 选择与循环
开发语言·javascript·ecmascript
HW-BASE6 小时前
《C语言》指针练习题--1
c语言·开发语言·单片机·算法·c