vue.js 二维码生成组件

Posted 2020-10-28 漫步CODE人生

安装

通过NPM安装

npm install vue-qart --save

插件应用

将vue-qart引入你的应用

import VueQArt from ‘vue-qart‘

new Vue({
    components: {VueQArt}
})

在你的应用中这样使用vue-qart

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

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

组件参数

名称	类型	默认值	说明
value	String	-	QR code表示的数据
imagePath	String	-	合并图片的路径
filter	String	threshold	定义一个图像过滤器，threshold或者color
size	Number	195	定义图像的大小，单位是px
version	Number	10	QR code版本 (1 <= version <= 40)
background	String	-	生成背景色
fillType	String	scale_to_fit	图片放置类型(fill 或者 scale to fit)