zgrolink/vue-qart

the compoent of vue 2.x for qart.js

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

the Vue 2.x Component for kciter's qart.js

Check the DEMO

Installation

install with NPM

npm install vue-qart --save

Import

import VueQArt from 'vue-qart'

new Vue({
    components: {VueQArt}
})

Usage

In template

<vue-q-art :config="config"></vue-q-art>

Set config value

data () {
    return {
        msg: 'Welcome to Your Vue.js App',
        config: {
            value: 'https://www.baidu.com',
            imagePath: './examples/assets/logo.png',
            filter: 'color'
        }
    }
}

For more details you should definitely check out 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

you can download the qrcode to image by using canvas.toDataURL()

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

# 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