vue项目实现生成二维码功能

npm 方式安装依赖

npm install --save ‘qrcodejs2’

如果您使用的是 yarn 请使用以下代码安装依赖

yarn add ‘qrcodejs2’

使用流程:
引入包

import QRCode from 'qrcodejs2'

完整代码:

<template>
    <div>
        <div ref="qrcode" style="padding: 29px;margin: 0px auto"></div>
    </div>
</template>
<style></style>
<script>
  import QRCode from 'qrcodejs2'
    export default{
        data(){
            return {
              qrcode: ''
            }
        },
      components: {
        QRCode: QRCode
      },
      methods: {
        getQrcode(text){
          this.$nextTick(function () {
	          this.$refs.qrcode.innerHTML = '' // 用于清空生成的二维码
	          let qrcode = new QRCode(this.$refs.qrcode, {
	            text: text, // 二维码内容
	            width: 200,
	            height: 200,
	            colorDark: '#333333', // 二维码颜色
	            colorLight: '#ffffff', // 二维码背景色
	            correctLevel: QRCode.CorrectLevel.L// 容错率,L/M/H
	          })
          this.qrcode = qrcode
        })
        }
      },
      mounted(){
        this.getQrcode('https://blog.csdn.net/weixin_43760328');
      }
    }
</script>

二维码:
vue项目实现生成二维码功能_第1张图片

你可能感兴趣的:(问题,vue.js,vue,js,javascript,es6)