文章目录

一、前言
二、实战步骤
- 1. 安装依赖
- 2. 引入到需要使用的页面
三、插件参数
- 1. value (二维码的值内容)
- 2. size (二维码元素的大小)
- 3. render-as
- 4. margin
- 4. background （二维码的背景颜色）
- 5. foreground （二维码的前景色）
- 6. class （二维码元素的类名）
- 7. level

提示：以下是本篇文章正文内容，下面案例可供参考

一、前言

今天分享下，在vue项目中生成二维码的一种方法

二、实战步骤

1. 安装依赖

Vue 2.x版本中用版本1.x
Vue 3.x版本中用3.x

//npm
npm install qrcode.vue  //yarn
yarn add qrcode.vue

2. 引入到需要使用的页面

代码如下（示例）：

<template><qrcode-vue :value="value" :size="size" level="H" />
</template>
<script>import QrcodeVue from 'qrcode.vue'export default {data() {return {value: 'https://example.com',size: 300,}},components: {QrcodeVue,},}
</script>

三、插件参数

1. value (二维码的值内容)

类型: string | 默认值: " "

2. size (二维码元素的大小)

类型: number | 默认值: 100

3. render-as

类型：string(‘canvas’ | ‘svg’)
默认值：canvas
生成二维码为canvas或svg。该道具svg可以在 SSR 上工作。

4. margin

类型：number
默认值：0
定义安静区的宽度。

4. background （二维码的背景颜色）

类型：string
默认值： #ffffff

5. foreground （二维码的前景色）

类型：string
默认值：#000000

6. class （二维码元素的类名）

类型：string
默认值：" "

7. level

类型：string(‘L’ | ‘M’ | ‘Q’ | ‘H’)
默认值：H
qrcode 纠错级别（“L”、“M”、“Q”、“H”之一）。

【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 实战】生成二维码

文章目录

一、前言

二、实战步骤

1. 安装依赖

2. 引入到需要使用的页面

三、插件参数

1. value (二维码的值内容)

2. size (二维码元素的大小)

3. render-as

4. margin

4. background （二维码的背景颜色）

5. foreground （二维码的前景色）

6. class （二维码元素的类名）

7. level

【Vue 实战】生成二维码相关推荐

最新文章

热门文章

【Vue 实战】 生成二维码

文章目录

一、前言

二、实战步骤

1. 安装依赖

2. 引入到需要使用的页面

三、插件参数

1. value (二维码的值内容)

2. size (二维码元素的大小)

3. render-as

4. margin

4. background （二维码的背景颜色）

5. foreground （二维码的前景色）

6. class （二维码元素的类名）

7. level

【Vue 实战】 生成二维码相关推荐

最新文章

热门文章

【Vue 实战】生成二维码

【Vue 实战】生成二维码相关推荐