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

2019-07-24  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读