vue2.0 二维码生成器

vue项目开发的时候经常会遇到需要将一个网址链接转化为二维码的需求，方便用户扫描观看，以下就是我在寻找vue二维码生成器的时候踩过的坑

（本人小白，不喜勿喷）

不能用的二维码生成器

    qrcode

    node-qrcode

    vue-qrcode

    qrcodejs2

等等，，，本人是贼吉儿讨厌那些博客粘贴复制别人的自己不试一试的，完全不能用

以下就是今天的主角xkeshi/vue-qrcode，感谢知乎-vue二维码生成器

安装

npm install xkeshi/vue-qrcode --save

组件中使用

<div v-show="qrcodeUrl" class="response">
    <qrcode :value="qrcodeUrl" v-if="qrcodeUrl" :options="{ size: 170 }"></qrcode>
    <p>请使用支付宝扫码支付</p>
</div>

// script 代码<script>import QRcode from '@xkeshi/vue-qrcode'export default {    name :'',    components: {
      qrcode: QRcode
    }}</script>

 

注意上面，我们使用了 qrcode 这个组件，引用自 vue-qrcode,然后当支付接口返回我们的支付链接的时候，我们才显示这个二维码：注意需要引入QRcode，在components里边注册组件qrcode，然后正常使用就行了

 

原来的文章中有错误 import Qrcode from 'vue-qrcode';应该是

import Qrcode from '@xkeshi/vue-qrcode';

关注公众号  大前端时代 获取更多前端知识

再次感谢原博主