Vue.js的Qrcode组件 - vue-qrcode

Vue.js的Qrcode组件 - vue-qrcode
插件名称 vue-qrcode
版本号 v2.0.0
发布时间 2020年9月15日
插件作者 fengyuanchen

另一个QR码生成器组件基于  node-qrcode

安装和下载:

# Yarn
$ yarn add @chenfengyuan/vue-qrcode vue

# NPM
$ npm i @chenfengyuan/vue-qrcode vue --save

基本用法:

1.导入并注册组件。

import Vue from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueQrcode.name, VueQrcode);

2.将QRcode组件添加到模板中,并确定属性值value

<qrcode value="https://www.vue365.cn/"></qrcode>

3.使用node-qrcode的选项自定义QR码  。

<qrcode value="https://www.vue365.cn/" :options="{ color: { dark: '#0275d8' } }"></qrcode>

4.确定QR码的标签名称:“ canvas”,“ img”等。

<qrcode value="https://www.vue365.cn/" tag="canvas"></qrcode>

变更日志:

v2.0.0(01/31/2021)

  • 升级到Vue 3