Vue二维码组件

发表于 更新于 分类于

vue components

npmnpmnpm

快速安装

install

快速添加 vueqr-new 组件到 app 中

1
npm install --save vueqr-new

components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <div>
    <vue-qr :config="config" :text="text"></vue-qr>
  </div>
</template>
<script>
import vueQr from 'vueqr-new';
const config = {
  // 容错等级
  errorCorrectionLevel: 'H',
  // 图片类型
  type: 'image/png',
  rendererOpts: {
  quality: 0.3
  },
  // 边框与二维码之间的间距
  margin: 0,
  // 缩放倍数
  scale: 4,
  width: 500,
  maskPattern:1,
  color: {
  dark: '#000000',
  light : "#ffffff"
  },
  style: {
  width: '128px',
  border: '1px solid #ccc'
  }
}
export default {
  data() {
    return {
      text: 'https://example.com',
      config: config
    }
  },
  components: {
    vueQr
  }
}
</script>

Component props

属性 类型 属性描述
config Object qrcode option
text String qrcode value

参考代码

“node-qrcode”

License

MIT