下载二维码生成插件
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