vue项目使用qrcodejs2生成二维码

1、安装

cnpm i qrcodejs2 -S

2、使用

template文件

<!-- 二维码弹框 -->
<el-button type="primary" @click="showCode">生成二维码</el-button>
<el-dialogwidth="30%"title="二维码弹框展示"@close="closeCode":visible.sync="dialogVisible"append-to-body><div class="content"><!-- 放置二维码的容器,需要给一个ref --><div id="qrcode" ref="qrcode"></div></div>
</el-dialog>

script文件

// 引入
import QRCode from 'qrcodejs2'methods: {// 展示二维码showCode() {this.dialogVisible = true// 二维码内容this.qrcode = '****'// 使用$nextTick确保数据渲染this.$nextTick(() => {this.createQrcode()})},// 生成二维码createQrcode() {this.qr = new QRCode('qrcode', {width: 150,height: 150, // 高度text: this.qrcode // 二维码内容// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）// background: '#f0f'// foreground: '#ff0'})// console.log(this.qrcode)},// 关闭弹框,清除已经生成的二维码closeCode () {this.$refs.qrcode.innerHTML = ''}
}

vue项目使用qrcodejs2生成二维码相关推荐

vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
vue项目中自动生成二维码
vue项目中自动生成二维码我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
使用 qrcodejs2 生成二维码详细API和参数
使用 qrcodejs2 生成二维码安装 qrcodejs2 cnpm install qrcodejs2 --save 使用 qrcodejs2 页面引入 import QRCode from ' ...
在H5中使用qrcode, qrcodejs2生成二维码
在H5中使用qrcode生成二维码安装插件 ```javascript npm install --save qrcode ``` 使用插件按需引入 //index.html<html> ...
Vue移动端H5生成二维码功能（qrcodejs2）
相信大家都遇到或是做过生成二维码的功能需求,现在针对vue移动端方法作简单介绍 1.安装.引用二维码插件 # 通过 npm 安装 npm i qrcodejs2 # 通过 yarn 安装 y ...
vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录
在vue中使用 qrcodejs2 1.安装 npm install qrcodejs2 --save 2.引入 import QRCode from "qrcodejs2" 3 ...
Vue - 使用qrcodejs2生成二维码
了解:QR码(英语:Quick Response Code:全称为快速响应矩阵图码)是二维码的一种, QR来自英文Quick Response的缩写,即快速反应,因为发明者希望QR码可以快速解码其内容 ...
【Vue】Vue生成二维码 Vue把url地址生成二维码手机打开扫一扫手机端打开实战案例 vue生成二维码
代码 npm install qrcodejs2 --save 代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入. 在页面中使用 <template>< ...
使用qrcodejs2生成二维码及下载
生成二维码首先引入npm包 import QRCode from 'qrcodejs2' 或 <script src="https://cdn.bootcdn.net/ajax/li ...

vue项目使用qrcodejs2生成二维码

vue项目使用qrcodejs2生成二维码相关推荐

最新文章

热门文章