vue生成二維碼
阿新 • • 發佈：2018-12-15
下載二維碼生成外掛
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