vue-qr

The Vue Component for SumiMakito's Awesome-qr.js. Support Vue2/Vue3/Vite

The only one qr code component for Vue.js you need !

Notice

Not support IE 不支持IE浏览器

Examples, 样例

Try to scan these QR codes below with your smart phone.

Example 1	Example 2	Example 3	Example 4

Demo

Run npm run dev or yarn dev

运行 npm run dev or yarn dev

Installation

install with NPM

npm install vue-qr --save

Import

// vue2.0
import VueQr from 'vue-qr'

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
  components: {VueQr}
}

Usage

In template

<vue-qr text="Hello world!"></vue-qr>
<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>
<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>

export default {
    methods:{
        test(dataUrl,id){
            console.log(url, id)
        }
    }
}

ComponentOptions

ComponentOptions controls the appearances of parts in the QR code.组件选项控制二维码中零件的外观。

type ComponentOptions = {
  data?: {
    scale?: number;
  };
  timing?: {
    scale?: number;
    protectors?: boolean;
  };
  alignment?: {
    scale?: number;
    protectors?: boolean;
  };
  cornerAlignment?: {
    scale?: number;
    protectors?: boolean;
  };
};

// default ComponentOptions

{
  data: {
    scale: 1,
  },
  timing: {
    scale: 1,
    protectors: false,
  },
  alignment: {
    scale: 1,
    protectors: false,
  },
  cornerAlignment: {
    scale: 1,
    protectors: true,
  },
}

scale 比例尺

Type number?

Scale factor for blocks in the specified area of the QR code. 在 QR 码指定区域的块的比例。

protectors

Type boolean?

Controls whether or not to draw the translucent protectors under the specified area in the QR code.控制是否在 QR 码的指定区域下绘制半透明保护器。

For more details you should definitely check out Awesome-qr.js