vue生成二维码

下载二维码生成插件

npm install --save qrcode2

<template>

<header class="header">

<button @click="qrcodesc()">二维码生成</button>

<div id="qrcode">二维码位置</div>

</header>

</template>

<script>

export default {

data () {

return {

list: []

}

},

methods: {

qrcodesc () {

this.$QRCodeSC('http://www.baidu.com')

}

}

}

</script>

import Vue from 'vue'

import QRCode from 'qrcodejs2'

/**

* 二维码生成方法

* 已注入所有Vue实例，

* template模板里调用 $QRCodeSC(src)

* 组件方法里调用 this.$QRCodeSC(src)

*/

const QRCodeSC = (url) => {

let qrcode = new QRCode('qrcode', { // qrcode html为标签id

width: 100, // 长度

height: 100, // 宽度

text: url // 内容

// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas)

// background: '#f0f'

// foreground: '#ff0'

})

return qrcode

}

Vue.prototype.$QRCodeSC = QRCodeSC