<template> <div id="qrcode" ></div> </template> <script> import QRCode from 'qrcodejs2' export default { name: "n-qr", props: { value: { type: String }, options:{ type:Object, default:function() { return { 100, height: 100, }; } } }, watch: { value(v){ this.qrcode.makeCode(v); }, }, mounted(){ this.qrcode = new QRCode("qrcode", this.options); this.qrcode.makeCode(this.value); } } </script>
使用:
<nqr v-model="qrUrl" :options="options" class="qrcode"></nqr> import nqr from "./nQr.vue"; export default { components: { nqr }, data() { return { qrUrl: "", options: { 200, height: 200 }, createTime: "" }; },