vue中实现二维码生成

GQ_cyan

于 2018-10-23 15:38:54 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/GQ_cyan/article/details/83307825

vue 专栏收录该内容

32 篇文章

订阅专栏

安装： npm install --save qrcodejs2

js部分：

<script>
    import QRCode from 'qrcodejs2'
    export default {
        methods: {
                 qrcode () {
                 let qrcode = new QRCode('qrcode', {
                     width: 100,
                     height: 100, // 高度  [图片上传失败...(image-9ad77b-1525851843730)]
                     text: 'https://mp.csdn.net/postedit/83183772' // 二维码内容
                 // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                 // background: '#f0f'
                  // foreground: '#ff0'
              })
                  console.log(qrcode)
            }
     },
     mounted () {  //调用
          this.qrcode()
     }
    }
</script>

内容部分：

<template>
    <div id="qrcode">二维码生成的位置</div>
</template>