当前位置: 首页 > news >正文

js 生成二维码

第一种,需要先下载包      npm install qrcode 

<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=’后面的地址

<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>

相关文章:

  • Spring Boot:SpringBoot 如何优雅地定制JSON响应数据返回
  • 民国漫画杂志《时代漫画》第16期.PDF
  • 虹科Pico汽车示波器 | 免拆诊断案例 | 2012 款雪佛兰科鲁兹车偶尔多个故障灯异常点亮
  • 27【Aseprite 作图】盆栽——拆解
  • 重学java 43.多线程 多等待多唤醒案例
  • 智能家居完结 -- 整体设计
  • 汽车以太网发展现状及挑战
  • 前台常见功能解决方案:下载+全屏+引导
  • kali基本扫描工具(自带)
  • XSS 攻击
  • Codeforces Round 927 (Div. 3) D. Card Game 题解 贪心
  • 基于Hadoop技术的智慧图书馆海量数据储存系统研究
  • Debezium+Kafka:Oracle 11g 数据实时同步至 DolphinDB 解决方案
  • 【C++课程学习】:命名空间的理解(图文详解)
  • i2c总线介绍
  • 【刷算法】求1+2+3+...+n
  • IIS 10 PHP CGI 设置 PHP_INI_SCAN_DIR
  • PHP 小技巧
  • SSH 免密登录
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 程序员该如何有效的找工作?
  • 分布式事物理论与实践
  • 技术胖1-4季视频复习— (看视频笔记)
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 前端攻城师
  • 前端学习笔记之观察者模式
  • 如何使用 JavaScript 解析 URL
  • 设计模式 开闭原则
  • 使用 Docker 部署 Spring Boot项目
  • 微信小程序开发问题汇总
  • 我与Jetbrains的这些年
  • 用jQuery怎么做到前后端分离
  • 在Mac OS X上安装 Ruby运行环境
  • zabbix3.2监控linux磁盘IO
  • ​DB-Engines 12月数据库排名: PostgreSQL有望获得「2020年度数据库」荣誉?
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • #{}和${}的区别?
  • #大学#套接字
  • #在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • #知识分享#笔记#学习方法
  • (1)Nginx简介和安装教程
  • (6)STL算法之转换
  • (k8s)kubernetes 部署Promehteus学习之路
  • (Redis使用系列) Springboot 使用redis的List数据结构实现简单的排队功能场景 九
  • (回溯) LeetCode 77. 组合
  • (十一)c52学习之旅-动态数码管
  • (四)事件系统
  • (转)scrum常见工具列表
  • (转)树状数组
  • .ai域名是什么后缀?
  • .apk 成为历史!
  • .md即markdown文件的基本常用编写语法
  • .Net 6.0--通用帮助类--FileHelper
  • .NET/C# 检测电脑上安装的 .NET Framework 的版本
  • .NET设计模式(7):创建型模式专题总结(Creational Pattern)