vue 二维码生成

vue2：fengyuanchen/vue-qrcode at v1 (github.com)

vue3：fengyuanchen/vue-qrcode: QR code component for Vue.js (github.com)

vue2内使用方法：

Getting started

Install

npm install vue@2 @chenfengyuan/vue-qrcode@1

In browser:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-qrcode.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>

Usage

import Vue from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';

Vue.component(VueQrcode.name, VueQrcode);

<qrcode value="Hello, World!" :options="{ width: 200 }"></qrcode>

其他人使用举例：

VUE+ElementUI在table组件中将动态链接生成二维码

myako_

vue-qrcode的GitHub网址：https://github.com/fengyuanchen/vue-qrcode

1. 安装vue-qrcode

npm install @chenfengyuan/vue-qrcode vue

1. 全局引用

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

// 在页面需要生成二维码的地方插入组件
// <qrcode value="需要生成二维码的链接" :options="{ width: 200 }"></qrcode>

// 举例：
<el-table-column label="二维码" align="center">
       <template slot-scope="scope">
               <qrcode :value="scope.row.qr_code" :options="{ width: 60 }"></qrcode>
       </template>
</el-table-column>

1. 单个页面使用组件

// 在页面中引入文件
import VueQrcode from '@chenfengyuan/vue-qrcode';
components: {
      qrcode: VueQrcode
},

// 在需要的位置插入组件：
<el-table-column label="二维码" align="center">
       <template slot-scope="scope">
               <qrcode :value="scope.row.qr_code" :options="{ width: 60 }"></qrcode>
       </template>
</el-table-column>

来源：（14）VUE+ElementUI在table组件中将动态链接生成二维码 - 简书 (jianshu.com)