Vue实现生成二维码

目录

①首先创建一个vue项目

②引入qrcodejs2

③封装组件

1. 创建Vue文件

2. 定义template模板

3. 引入QRCode包

4. 进行封装

5. less控制样式

④启动项目

1. 在终端输入启动项目命令

2. 在浏览器中输入访问地址

3. 访问生成的二维码

4. 扫码进行解析

与后端用Java实现生成二维码相比，在前端用Vue生成二维码更加简单、灵活。

①首先创建一个vue项目

可以用vue-cli脚手架去生成。

②引入qrcodejs2

在终端输入以下命令：

npm install  qrcodejs2 --save

③封装组件

1. 创建Vue文件

在src/views路径下创建111.vue文件

2. 定义template模板

<template><body><div id="qqq" ><div id="qrCode" ref="qrCodeDiv"></div></div></body>
</template>

3. 引入QRCode包

import QRCode from 'qrcodejs2';

4. 进行封装

<script>
export default {name: "qrCode",data() {return {}},mounted: function () {this.$nextTick(function () {this.bindQRCode();})},methods: {bindQRCode: function () {new QRCode(this.$refs.qrCodeDiv, {text: 'Vue实现生成二维码！',width: 200,height: 200,colorDark: "#333333", //二维码颜色colorLight: "#ffffff", //二维码背景色correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H})}}
}
</script>

5. less控制样式

布局样式大家可以根据自己的喜好去定义，也可以用css控制样式，这里用less控制样式简单举个例子：

<style lang='less'>
#qqq {background-color: #111;width:300px;height:300px;margin: 0 auto; /*水平居中*/position: relative;
}#qrCode {display: inline-block;margin: 0 auto; /*水平居中*/position: relative;top: 15%;img {width: 200px;height: 200px;background-color: #fff; //设置白色背景色padding: 6px; // 利用padding的特性，挤出白边}
}
</style>

本人是把样式也写在111.vue文件里面，也可以分开去写！

④启动项目

1. 在终端输入启动项目命令

npm run serve

成功启动项目：

2. 在浏览器中输入访问地址

http://localhost:8080/111

这里我们设计了路由，所以输入/111相当于输入/111.vue

可以在src/router/index.ts中添加一下代码：

const routes: Array<RouteRecordRaw> = [
{path: '/111',name: '生成二维码',component: () => import('../views/111.vue')
}
]

3. 访问生成的二维码

4. 扫码进行解析

识别图中的二维码后，可以看到显示我们自己设置的文本内容“Vue实现生成二维码！”

Vue实现生成二维码相关推荐

Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
vue实现生成二维码，并生成图片
vue实现生成二维码,并生成图片 1.安装插件 npm install qrcodejs2 --save npm install --save html2canvas 2.导包 import html ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录
在vue中使用 qrcodejs2 1.安装 npm install qrcodejs2 --save 2.引入 import QRCode from "qrcodejs2" 3 ...
vue 在线生成二维码二维码生成背景下载
安装引用 3.注入 app.vue 这里只是生成二维码生成二维码 js 这里是需要二维码并且与另一张合成一张image的! 上代码
【vue】生成二维码
vue有两种生成二维码的方式,qrcode.vue-qr(有icon) 1. qrcode npm i qrcodejs2 --save <div class="qrcode" ...
vue前端生成二维码并导出PDF
1.安装插件 npm install --save qrcodejs2 (这是生成微信二维码插件) npm install html2canvas jspdf --save (这是将html页面转化为 ...
Vue 链接生成二维码
1.安装qrcodejs2 cnpm i qrcodejs2 --save 或者 npm i qrcodejs2 --save 2.在需要用的页面中引入 <div id="qrcode ...

Vue实现生成二维码

①首先创建一个vue项目

②引入qrcodejs2

③封装组件

1. 创建Vue文件

2. 定义template模板

3. 引入QRCode包

4. 进行封装

5. less控制样式

④启动项目

1. 在终端输入启动项目命令

2. 在浏览器中输入访问地址

3. 访问生成的二维码

4. 扫码进行解析

Vue实现生成二维码相关推荐

最新文章

热门文章