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>
相关推荐
小小小小宇4 分钟前
设计稿转代码:如何将生成代码与内部组件库关联
前端
七牛云行业应用4 分钟前
别每个 AI 工具单独配了!MCP 一次搭建,Claude、Cursor、TRAE 全能用
前端
_xaboy4 分钟前
FormCreate 设计器 v6.3 正式发布:AI 表单助理3.0登场!
前端·vue.js·低代码·开源·表单设计器
胡志辉5 分钟前
邮件中点击“加载图片”,你的IP地址已经被泄漏
前端·后端·安全
码力斜杠哥12 分钟前
Rust初习录(6)Rust的 if 玩法
开发语言·python·rust
聆风吟º17 分钟前
【C标准库】深入理解C语言 isalpha 函数详解:判断字符是否为字母
c语言·开发语言·库函数·isalpha
openKaka_17 分钟前
reconcileChildren 深入:React 如何根据 ReactElement 构建子 Fiber
前端·javascript·react.js
三翼鸟数字化技术团队33 分钟前
事件循环原来这么简单!
前端
gf132111134 分钟前
python_【更新已发送的消息卡片】
java·前端·python
WL_Aurora39 分钟前
Java字符输入全攻略
java·开发语言