1.qrcodejs2をダウンロード
npm install qrcodejs2 --save
2. 新しい QRCode.vue コンポーネントを作成します
<template>
<div style="height: 100%;" :id="id" :ref="id"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
data() {
return {
qrcode: ''
}
},
props: {
id: {
type: String,
required: true
},
text: {
type: String,
default: 'http://jindo.dev.naver.com/collie'
},
width: {
type: String,
default: '128'
},
height: {
type: String,
default: '128'
},
colorDark: {
type: String,
default: '#000000'
},
colorLight: {
type: String,
default: '#ffffff'
}
},
watch: {
text(newText) {
this.createQrcode()
}
},
mounted() {
this.createQrcode()
},
methods: {
createQrcode() {
if(this.qrcode) {
this.$refs[this.id].innerHTML = ''
}
this.qrcode = new QRCode(this.$refs[this.id], {
text: this.text,
width: this.width,
height: this.height,
colorDark: this.colorDark,
colorLight: this.colorLight,
correctLevel: QRCode.CorrectLevel.H,
})
},
updateCode() {
this.qrcode.makeCode("http://naver.com")
}
}
}
</script>
3. このページでは QRCode.vue コンポーネントが使用されています
<!-- 二维码图片 -->
<el-dialog title="二维码展示" :visible.sync="dialogVisible" width="20%">
<div style="display: flex; justify-content: center; width: 100%">
<QrCode :id="'QrCode'" :text="codeUrl" />
</div>
</el-dialog>
import QrCode from "../../components/QRCode.vue";
components: {
QrCode,
},
data() {
return {
dialogVisible: false,
codeUrl: "",
};
},
showQRcode(item) {
this.codeUrl = item.qrCode
this.dialogVisible = true;
},