文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、前言
今天分享下,在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”之一)。