Vue.js 的二维码组件.zip

# QR Code > Easy to use QR code component, bases on [node-qrcode](https://github.com/soldair/node-qrcode). ## Basic usage ```html <template> <vue-qrcode value="Hello, World!"></vue-qrcode> <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode"></vue-qrcode> </template> ``` ## Add options ```html <template> <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode"></vue-qrcode> <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode" :options="{ color: { dark: '#0074d9', light: '#7fdbff', }, }" ></vue-qrcode> </template> ``` ## Custom tag ```html <template> <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode" tag="img"></vue-qrcode> <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode" tag="svg" :options="{ width: 148 }"></vue-qrcode> </template> ``` ## Add a logo ### Covering ```html <template> <figure class="qrcode"> <vue-qrcode value="https://github.com/fengyuanchen" tag="svg" :options="{ errorCorrectionLevel: 'Q', width: 200, }" ></vue-qrcode> <img class="qrcode__image" src="https://avatars.githubusercontent.com/u/3456749" alt="Chen Fengyuan" /> </figure> </template> <style scoped> .qrcode { display: inline-block; font-size: 0; margin-bottom: 0; position: relative; } .qrcode__image { background-color: #fff; border: 0.25rem solid #fff; border-radius: 0.25rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25); height: 15%; left: 50%; overflow: hidden; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 15%; } </style> ``` ### Drawing > Only available to canvas elements. ```html <template> <vue-qrcode value="https://github.com/fengyuanchen" :options="{ errorCorrectionLevel: 'Q', width: 200, }" @ready="onReady" ></vue-qrcode> </template> <script> export default { methods: { onReady(canvas) { const context = canvas.getContext('2d'); const image = new Image(); image.src = 'https://avatars.githubusercontent.com/u/3456749'; image.crossorigin = 'anonymous'; image.onload = () => { const coverage = 0.15; const width = Math.round(canvas.width * coverage); const x = (canvas.width - width) / 2; this.drawImage(context, image, x, x, width, width); }; }, drawImage(context, image, x, y, width, height, radius = 4) { context.shadowOffsetX = 0; context.shadowOffsetY = 2; context.shadowBlur = 4; context.shadowColor = '#00000040'; context.lineWidth = 8; context.beginPath(); context.moveTo(x + radius, y); context.arcTo(x + width, y, x + width, y + height, radius); context.arcTo(x + width, y + height, x, y + height, radius); context.arcTo(x, y + height, x, y, radius); context.arcTo(x, y, x + width, y, radius); context.closePath(); context.strokeStyle = '#fff'; context.stroke(); context.clip(); context.fillStyle = '#fff'; context.fillRect(x, x, width, height); context.drawImage(image, x, x, width, height); }, }, } </script> ``` ## Props | Name | Type | Default | Options | Description | | --- | --- | --- | --- | --- | | value | `string` | - | - | The value of the QR code. | | options | `Object` | - | [Checkout the available options](https://github.com/soldair/node-qrcode#qr-code-options) | The options for the QR code generator. | | tag | `string` | `"canvas"` | canvas, img, svg | The tag of the QR code. | ## Events | Name | Parameters | Description | | --- | --- | --- | | ready | `($el)` | Fire when the QR code is generated. |