<div class="poster-qr">
<div class="qrWrapper">
<!-- 放置二维码的容器 -->
<div id="qrcode" ref="qrcode" class="qrcode"/>
</div>
<div class="qrDesc">长按扫描二维码领取</div>
</div>
import QRCode from 'qrcodejs2'
export default {
name: 'SharePoster',
components: { QRCode },
data() {
return {}
},
mounted() {
this.$nextTick(() => {
this.qrcode('http://www.baidu.com') // 二维码的内容,由后端返回链接
})
},
methods: {
// 生成二维码
qrcode(url) {
new QRCode(window.document.getElementById('qrcode'), {
width: window.document.getElementById('qrcode').offsetWidth,
height: window.document.getElementById('qrcode').offsetHeight,
text: url,
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
})
}
}