vue中使用qrcodejs2生成二维码

npm地址 https://www.npmjs.com/package/qrcodejs2

安装

npm install qrcodejs2 --save 

官方给的文档非常简洁，所以用起来很简单

看单文件中的写法，基本一致。

<template>
  <div>
    <div id="qrcodeImg"></div>
    <!-- 创建一个div，并设置id -->
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'; // 引入qrcode
export default {
  name: 'qrcode-img',
  components: {},
  props: {
    qrcontent: {
      type: String
    },
    width: {
      type: String
    },
    height: {
      type: String
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.qrcode();
  },
  methods: {
    qrcode() {
      new QRCode('qrcodeImg', {
        width: this.width,
        height: this.height,
        text: this.qrcontent, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      });
     // 下边css自定义就行了。。。我这主要因为别的原因才改动的
    }
  }
};
</script>

<style lang="scss" scoped>
#qrcodeImg {
  box-sizing: border-box;
  display: inline-block;
  padding: 8px;
  background: #cccccc;
  & > img {
    display: inline-block !important;
  }
}
</style>

搞定！完结