美文网首页
2019-07-24vue中生成下载app二维码使用QRcode

2019-07-24vue中生成下载app二维码使用QRcode

作者: 半眼鱼 | 来源:发表于2019-07-24 16:53 被阅读0次

    cnpm install --save qrcodejs2

    <template>
      <div>
        <div id="qrcode"></div> <!-- 创建一个div,并设置id为qrcode -->
      </div>
    </template>
       
    <script>
    import QRCode from 'qrcodejs2'  // 引入qrcode
    export default {
      name : 'test',
      mounted () {
        this.qrcode();
      },
      methods: {
        qrcode() {
          let qrcode = new QRCode('qrcode', {
            width: 132,  
            height: 132,
            text: 'https://www.baidu.com', // 二维码地址
            colorDark : "#000",
            colorLight : "#fff",
          })
        },
      }
    }
    </script>
    
    <style lang='less'>
     #qrcode {
        display: inline-block;
        img {
          width: 132px;
          height: 132px;
          background-color: #fff; //设置白色背景色
          padding: 6px; // 利用padding的特性,挤出白边
        }
      }
    </style>
    

    相关文章

      网友评论

          本文标题:2019-07-24vue中生成下载app二维码使用QRcode

          本文链接:https://www.haomeiwen.com/subject/noqfrctx.html