{"id":13536063,"url":"https://github.com/superman66/vue-qart","last_synced_at":"2025-04-05T20:04:15.540Z","repository":{"id":57145459,"uuid":"81069060","full_name":"superman66/vue-qart","owner":"superman66","description":"the compoent of vue 2.x for qart.js","archived":false,"fork":false,"pushed_at":"2018-07-13T16:38:17.000Z","size":2297,"stargazers_count":292,"open_issues_count":8,"forks_count":44,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-29T10:30:36.889Z","etag":null,"topics":["qart","vuejs2"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/ykp868q7mz","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/superman66.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.MD","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-06T09:15:30.000Z","updated_at":"2024-09-16T10:03:47.000Z","dependencies_parsed_at":"2022-09-06T13:01:13.039Z","dependency_job_id":null,"html_url":"https://github.com/superman66/vue-qart","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superman66%2Fvue-qart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superman66%2Fvue-qart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superman66%2Fvue-qart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/superman66%2Fvue-qart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/superman66","download_url":"https://codeload.github.com/superman66/vue-qart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393552,"owners_count":20931811,"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":["qart","vuejs2"],"created_at":"2024-08-01T09:00:34.283Z","updated_at":"2025-04-05T20:04:15.503Z","avatar_url":"https://github.com/superman66.png","language":"JavaScript","funding_links":[],"categories":["实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","二维码","UI Components","QR Code"],"readme":"[![Travis](https://img.shields.io/travis/superman66/vue-qart.svg?style=plastic)](https://travis-ci.org/superman66/vue-qart) [![npm](https://img.shields.io/npm/v/vue-qart.svg?style=plastic)](https://www.npmjs.com/package/vue-qart) [![npm](https://img.shields.io/npm/dt/vue-qart.svg?style=plastic)](https://www.npmjs.com/package/vue-qart)\n# vue-qart\n##  You should read it before you using vue-qart\n\u003ebecause of qart.js's author doesn't publish the lastest version to npm. so, the new options `size`, `version`,`background`,`fillType` doesn't work in vue-qart until qart.js' author publish the lastest version.\n\n\u003eFor More Detail, seeing this issue: [size option doesn't works](https://github.com/kciter/qart.js/issues/20)\n\nthe Vue 2.x Component for [kciter's qart.js](https://github.com/kciter/qart.js)\n\u003cbr\u003e\n\u003cimg src=\"demo/assets/qrcode.png\"/\u003e\n\u003cbr\u003e\nCheck the [DEMO](http://superman66.github.io/vue-qart/)\n## Installation\n**install with NPM**\n```javascript\nnpm install vue-qart --save\n```\n**Import**\n```javascript\nimport VueQArt from 'vue-qart'\n\nnew Vue({\n    components: {VueQArt}\n})\n```\n## Usage\n**In template**\n\n```html\n\u003cvue-q-art :config=\"config\"\u003e\u003c/vue-q-art\u003e\n```\n**Set config value**\n\n```javascript\ndata () {\n    return {\n        msg: 'Welcome to Your Vue.js App',\n        config: {\n            value: 'https://www.baidu.com',\n            imagePath: './examples/assets/logo.png',\n            filter: 'color'\n        }\n    }\n}\n```\n**for imagePath prop, you can use base64 instead of image path.**\n\nFor more details you should definitely check out [qart.js](https://github.com/kciter/qart.js) \n\n\n**download to image**\n\npassing `download` props, to show download button, it support: \n- text - button text\n- visible - setting download button visible or not\n- style - setting download button style\n- type - image type,such as `image/png`\n- filename\n\n\nyou can download the qrcode to image by using `canvas.toDataURL()`\n```javascript\nconst myCanvas = this.$refs.qart.children[0];\nconst type = 'image/png';\nlet image = myCanvas.toDataURL(type).replace(type, \"image/octet-stream\");\nwindow.location.href = image; // it will save locally\n```\n\n## Build Setup\n```bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080/demo/\nnpm run dev\n\n# build demo \nnpm run demo\n\n# export the directive as a library\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperman66%2Fvue-qart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuperman66%2Fvue-qart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperman66%2Fvue-qart/lists"}