Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/superman66/vue-qart
the compoent of vue 2.x for qart.js
https://github.com/superman66/vue-qart
qart vuejs2
Last synced: 6 days ago
JSON representation
the compoent of vue 2.x for qart.js
- Host: GitHub
- URL: https://github.com/superman66/vue-qart
- Owner: superman66
- License: mit
- Created: 2017-02-06T09:15:30.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-13T16:38:17.000Z (over 6 years ago)
- Last Synced: 2024-10-29T10:30:36.889Z (2 months ago)
- Topics: qart, vuejs2
- Language: JavaScript
- Homepage: https://codesandbox.io/s/ykp868q7mz
- Size: 2.19 MB
- Stars: 292
- Watchers: 15
- Forks: 44
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.MD
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-qart - qart?style=social) - 用于qartjs的Vue2指令 (实用库)
- awesome-github-vue - vue-qart - 用于qartjs的Vue2指令 (实用库)
- awesome-github-vue - vue-qart - 用于qartjs的Vue2指令 (实用库)
- awesome - vue-qart - 用于qartjs的Vue2指令 (实用库)
README
[](https://travis-ci.org/superman66/vue-qart) [](https://www.npmjs.com/package/vue-qart) [](https://www.npmjs.com/package/vue-qart)
# vue-qart
## You should read it before you using vue-qart
>because 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.
>For More Detail, seeing this issue: [size option doesn't works](https://github.com/kciter/qart.js/issues/20)
the Vue 2.x Component for [kciter's qart.js](https://github.com/kciter/qart.js)
Check the [DEMO](http://superman66.github.io/vue-qart/)
## Installation
**install with NPM**
```javascript
npm install vue-qart --save
```
**Import**
```javascript
import VueQArt from 'vue-qart'
new Vue({
components: {VueQArt}
})
```
## Usage
**In template**
```html
```
**Set config value**
```javascript
data () {
return {
msg: 'Welcome to Your Vue.js App',
config: {
value: 'https://www.baidu.com',
imagePath: './examples/assets/logo.png',
filter: 'color'
}
}
}
```
**for imagePath prop, you can use base64 instead of image path.**
For more details you should definitely check out [qart.js](https://github.com/kciter/qart.js)
**download to image**
passing `download` props, to show download button, it support:
- text - button text
- visible - setting download button visible or not
- style - setting download button style
- type - image type,such as `image/png`
- filename
you can download the qrcode to image by using `canvas.toDataURL()`
```javascript
const myCanvas = this.$refs.qart.children[0];
const type = 'image/png';
let image = myCanvas.toDataURL(type).replace(type, "image/octet-stream");
window.location.href = image; // it will save locally
```
## Build Setup
```bash
# install dependencies
npm install
# serve with hot reload at localhost:8080/demo/
npm run dev
# build demo
npm run demo
# export the directive as a library
npm run build
```