{"id":13608448,"url":"https://github.com/Binaryify/vue-qr","last_synced_at":"2025-04-12T17:31:38.878Z","repository":{"id":20402664,"uuid":"89840737","full_name":"Binaryify/vue-qr","owner":"Binaryify","description":"The Vue Component for Awesome-qr.js","archived":false,"fork":false,"pushed_at":"2024-06-18T07:42:16.000Z","size":4978,"stargazers_count":858,"open_issues_count":39,"forks_count":122,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-11T14:18:49.281Z","etag":null,"topics":["qr","vite","vue","vue-component","vue-qr","vue2","vue3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Binaryify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.MD","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-30T09:06:15.000Z","updated_at":"2025-04-03T06:25:29.000Z","dependencies_parsed_at":"2024-06-18T08:58:47.550Z","dependency_job_id":"9d23e879-b626-4fc9-92fd-9a5c88ea2293","html_url":"https://github.com/Binaryify/vue-qr","commit_stats":{"total_commits":64,"total_committers":10,"mean_commits":6.4,"dds":0.65625,"last_synced_commit":"2351dd50d99556220d353bd81b0a2eaeae4f11e6"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Binaryify%2Fvue-qr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Binaryify%2Fvue-qr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Binaryify%2Fvue-qr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Binaryify%2Fvue-qr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Binaryify","download_url":"https://codeload.github.com/Binaryify/vue-qr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248605106,"owners_count":21132112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["qr","vite","vue","vue-component","vue-qr","vue2","vue3"],"created_at":"2024-08-01T19:01:27.343Z","updated_at":"2025-04-12T17:31:33.869Z","avatar_url":"https://github.com/Binaryify.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Other versions"],"sub_categories":["protectors"],"readme":"# vue-qr\n\u003ca href=\"https://www.npmjs.com/package/vue-qr\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-qr.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-qr\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-qr.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\n\nThe Vue Component for [SumiMakito's Awesome-qr.js](https://github.com/SumiMakito/Awesome-qr.js). Support Vue2/Vue3/Vite\n\nThe only one qr code component for Vue.js you need !\n\n### Notice\nNot support IE 不支持IE浏览器\n\n### Examples, 样例\n\n\u003e Try to scan these QR codes below with your smart phone.\n\nExample 1|Example 2|Example 3|Example 4\n------------ | ------------- | -------------| -------------\n\u003cimg src=\"https://raw.githubusercontent.com/Binaryify/vue-qr/master/src/assets/result1.png\" width=\"300\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Binaryify/vue-qr/master/src/assets/result2.png\" width=\"300\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Binaryify/vue-qr/master/src/assets/result3.png\" width=\"300\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/Binaryify/vue-qr/master/src/assets/result4.gif\" width=\"300\"\u003e\n\n### Demo\nRun `npm run dev` or `yarn dev`\n\n运行 `npm run dev` or `yarn dev`\n\n## Installation\n**install with NPM**\n```bash\nnpm install vue-qr --save\n```\n**Import**\n```js\n// vue2.0\nimport VueQr from 'vue-qr'\n\n// vue3.0 (support vite)\nimport vueQr from 'vue-qr/src/packages/vue-qr.vue'\n...\n{\n  components: {VueQr}\n}\n```\n## Usage\n**In template**\n\n```html\n\u003cvue-qr text=\"Hello world!\"\u003e\u003c/vue-qr\u003e\n\u003cvue-qr :bgSrc='src' :logoSrc=\"src2\" text=\"Hello world!\" :size=\"200\"\u003e\u003c/vue-qr\u003e\n\u003cvue-qr text=\"Hello world!\" :callback=\"test\" qid=\"testid\"\u003e\u003c/vue-qr\u003e\n```\n\n```js\nexport default {\n    methods:{\n        test(dataUrl,id){\n            console.log(url, id)\n        }\n    }\n}\n```\nParameter | Explanation\n----|----\ntext | Contents to encode. 欲编码的内容\ncorrectLevel|  Correct Level 0-3 容错级别 0-3\nsize | Width as well as the height of the output QR code, includes margin. 尺寸, 长宽一致, 包含外边距\nmargin | Margin to add around the QR code, default 20px. 二维码图像的外边距, 默认 20px\ncolorDark | Color of \"true\" blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 实点的颜色\ncolorLight | Color of empty space, or \"false\" blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) 空白区的颜色\ncomponents | Controls the appearances of parts in the QR code. Read section [ComponentOptions](#componentoptions) to learn more. 阅读 [ComponentOptions](#componentoptions) 了解更多信息。\nbgSrc | Background url to embed in the QR code.  欲嵌入的背景图地址\ngifBgSrc | Gif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affects performance. 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能\nbackgroundColor | Background color 背景色\nbackgroundDimming | Color mask to add above the background image. Helpful when having problems with decoding. 叠加在背景图上的颜色, 在解码有难度的时有一定帮助\nlogoSrc | Logo url to embed at the center of generated QR code 嵌入至二维码中心的 LOGO 地址\nlogoScale | 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. 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 `logoScale*(size-2*margin)`, 默认 0.2\nlogoMargin | White margin that appears around the logo image. Default is 0. LOGO 标识周围的空白边框, 默认为0\nlogoBackgroundColor | Logo background color, need set logo margin. Logo 背景色,需要设置 logo margin\nlogoCornerRadius | Radius of the logo's corners.Default is 0 LOGO 标识及其边框的圆角半径, 默认为0\nwhiteMargin | If set to true, a white border will appear around the background image. Default is true. 若设为 true, 背景图外将绘制白色边框\ndotScale | Value used to scale down the data dots' size. (0 \u003c scale \u003c 1.0) default 1 数据区域点缩小比例,默认为1\nautoColor | If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true\nbinarize | If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值\nbinarizeThreshold | Threshold used to binarize the whole image. Default is 128. (0 \u003c threshold \u003c 255) 二值化处理的阈值\ncallback | Data URI of the generated QR code will be available here. 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)\nbindElement | If set to true, the generated QR will bind to a HTML element automatically. Default is true. 指定是否需要自动将生成的二维码绑定到HTML上, 默认是true\n\n## ComponentOptions\n\n\u003e _ComponentOptions_ controls the appearances of parts in the QR code.组件选项控制二维码中零件的外观。\n\n```ts\ntype ComponentOptions = {\n  data?: {\n    scale?: number;\n  };\n  timing?: {\n    scale?: number;\n    protectors?: boolean;\n  };\n  alignment?: {\n    scale?: number;\n    protectors?: boolean;\n  };\n  cornerAlignment?: {\n    scale?: number;\n    protectors?: boolean;\n  };\n};\n```\n\n```ts\n// default ComponentOptions\n\n{\n  data: {\n    scale: 1,\n  },\n  timing: {\n    scale: 1,\n    protectors: false,\n  },\n  alignment: {\n    scale: 1,\n    protectors: false,\n  },\n  cornerAlignment: {\n    scale: 1,\n    protectors: true,\n  },\n}\n```\n\n### scale 比例尺\nType number?\n\nScale factor for blocks in the specified area of the QR code.\n在 QR 码指定区域的块的比例。\n\n### protectors\n\n**Type** `boolean?`\n\nControls whether or not to draw the translucent protectors under the specified area in the QR code.控制是否在 QR 码的指定区域下绘制半透明保护器。\n\n\nFor more details you should definitely check out [Awesome-qr.js ](https://github.com/SumiMakito/Awesome-qr.js)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBinaryify%2Fvue-qr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBinaryify%2Fvue-qr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBinaryify%2Fvue-qr/lists"}