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 分钟前
JavaToken实战指南:从原理到应用
开发语言·python
夏幻灵13 分钟前
过来人的经验-前端学习路线
前端
zho_uzhou13 分钟前
c++ imgui implot绘图使用示例 visual studio
开发语言·c++·visual studio
dyyx11115 分钟前
C++中的过滤器模式
开发语言·c++·算法
星夜泊客30 分钟前
C# 基础:为什么类可以在静态方法中创建自己的实例?
开发语言·经验分享·笔记·unity·c#·游戏引擎
CappuccinoRose32 分钟前
React框架学习文档(七)
开发语言·前端·javascript·react.js·前端框架·reactjs·react router
FFF-X42 分钟前
前端字符串模糊匹配实现:精准匹配 + Levenshtein 编辑距离兜底
前端
消失的旧时光-194342 分钟前
从拷贝到移动:C++ 移动构造与移动赋值是怎么被逼出来的?(附完整示例)
开发语言·c++
古译汉书43 分钟前
部分.exe文件打开但是一直显示界面,点击任务栏持续无反应
开发语言·单片机·嵌入式硬件
2301_817497331 小时前
C++中的装饰器模式高级应用
开发语言·c++·算法