vue qrcode生成二维码

1.首先安装qrcode插件

npm i qrcode -S

2.引入使用

import QRCode from 'qrcode'

3.生成二维码

<template><div><el-row><el-button @click="createCode" type="success" round>生成二维码</el-button></el-row><canvas ref="canvas" class="canvas"></canvas></div>
</template><script>
import QRCode from "qrcode";
export default {name: "Qrcode",methods: {createCode() {let canvas = this.$refs.canvas;// 用法一：调用函数去生成二维码，参数为二维码的容器，要生成的内容，二维码样式，回调函数// QRCode.toDataURL(QRCode.toCanvas(canvas,"www.baidu.com",{ width: 200, height: 200 },function (error) {if (error) {console.log(error);} else {console.log("success");}});},},
};
</script><style>
.canvas {width: 200px;height: 200px;border: 1px solid #333;
}
</style>

效果展示

vue qrcode生成二维码相关推荐

vue qrcode生成二维码并拼装url参数
因笔者需要用到动态二维码绑定关系这一项,故参考网上许多资料最终整理如下文档第一步: npm i qrcode --save 第二步:创建一个vue文件,用于放置你的二维码 <template& ...
vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
vue 中生成带logo的二维码vue-qr(可换背景) 利用qrcode生成二维码
vue 中生成带logo的二维码这里运用了一个插件 vue-qr npm install vue-qr --save <template><div><vue-qr :c ...
vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode
通过使用 qrcode 生成二维码, 使用 jszip 打包批量二维码文件, 使用 file-saver 下载打包好的zip文件, 使用 vue-print-nb 打印生成的二维码生成二维码: 打印 ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
vue实现生成二维码，并生成图片
vue实现生成二维码,并生成图片 1.安装插件 npm install qrcodejs2 --save npm install --save html2canvas 2.导包 import html ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)

vue qrcode生成二维码

vue qrcode生成二维码相关推荐

最新文章

热门文章