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>
相关推荐
浪扼飞舟1 分钟前
C#(多线程和同步异步)
java·开发语言
万行1 分钟前
机器人系统SLAM讲解
开发语言·python·决策树·机器学习·机器人
抬头望远方2 分钟前
【无人机】无人机群在三维环境中的碰撞和静态避障仿真(Matlab代码实现)
开发语言·支持向量机·matlab·无人机
matlab科研助手4 分钟前
【路径规划】基于遗传算法的农药无人机在多边形区域的路径规划研究附Matlab代码
开发语言·matlab·无人机
2301_780669867 分钟前
字符集及其编码、解码操作、IO流分类
java·开发语言
Kiyra13 分钟前
阅读 Netty 源码关于 NioEventLoop 和 Channel 初始化部分的思考
运维·服务器·前端
无名的小三轮15 分钟前
第三章 防火墙概述
开发语言·php
冰暮流星22 分钟前
javascript的switch语句介绍
java·前端·javascript
有梦想的攻城狮22 分钟前
Java中的Double类型的存在精度丢失详解
java·开发语言·bigdecimal·double
一路往蓝-Anbo34 分钟前
【第42期】调试进阶(一):IDE中的Register与Memory窗口
c语言·开发语言·ide·stm32·单片机·嵌入式硬件