1. The backend will return a link, you can directly put the link into the text to
import the plug-in first
npm install vue-qr --save // 也可以用yarn引入项目
yarn add vue-qr // 我用的这个，用npm报错了
2. Registration
// vue2.0
import VueQr from 'vue-qr'
// vue3.0
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
components: {
VueQr}
}
3. use
<el-table-column align="left" label="适用类型" show-overflow-tooltip>
<template #default="{ row }">
<vueQr :size="120" :text="row.qrcodeImgUrl" />
</template>
</el-table-column>
3. Parameters
| parameter | explain |
|---|---|
| text | Contents to encode. Contents to encode |
| correctLevel | Correct Level 0-3 Error Tolerance Level 0-3 |
| size | Width as well as the height of the output QR code, includes margin. |
| margin | Margin to add around the QR code, default 20px. |
| colorDark | Color of “true” blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 实点的颜色 |
| colorLight | Color of empty space, or “false” blocks. Works only when both colorDark and colorLight are set. |
| components | Controls the appearances of parts in the QR code. Read section ComponentOptions to learn more. Read ComponentOptions to learn more. |
| bgSrc | Background url to embed in the QR code. |
| gifBgSrc | Gif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affect performance. Setting this option affects performance |
| backgroundColor | Background color background color |
| backgroundDimming | Color mask to add above the background image. Helpful when having problems with decoding. |
| logoSrc | Logo url to embed at the center of generated QR code LOGO address embedded in the center of the QR code |
| logoScale | Value used to scale the logo image. Larger value may result in decode failure. Size of the logo equals to logoScale*(size-2 margin). Default is 0.2. The value used to calculate the LOGO size, too large will cause decoding failure, LOGO Size calculation formula logoScale (size-2*margin), default 0.2 |
| logoMargin | White margin that appears around the logo image. Default is 0. White margin that appears around the logo image. Default is 0. |
| logoBackgroundColor | Logo background color, need set logo margin. Logo background color, need set logo margin |
| logoCornerRadius | Radius of the logo's corners.Default is 0 The fillet radius of the LOGO logo and its border, the default is 0 |
| whiteMargin | If set to true, a white border will appear around the background image. Default is true. If set to true, a white border will appear around the background image |
| dotScale | Value used to scale down the data dots' size. (0 < scale < 1.0) default 1 Data area point reduction ratio, the default is 1 |
| autoColor | If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. |
| binarize | If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. |
| binarizeThreshold | Threshold used to binarize the whole image. Default is 128. (0 < threshold < 255) Threshold for binarization |
| callback | Data URI of the generated QR code will be available here. The generated QR code Data URI can be obtained in the callback, the first parameter is the QR code data URL, and the second parameter is the qid passed by props (because the QR code Code generation is asynchronous, so add an id for sorting) |
| bindElement | If set to true, the generated QR will bind to a HTML element automatically. Default is true. Specify whether to automatically bind the generated QR code to HTML, the default is true |