前端网址转二维码实现

1. 先安装依赖

 npm install qrcode-npm

2.导入模块

import $ from "jquery";

3.前端点击事件和方法

<el-button type="primary" size="mini" @click="qrCode">生成二维码</el-button>
//在data定义弹窗变量： 
qrVisable:false
    //qrCode 将链接生成二维码
    qrCode(){
      if(this.form.linkAddress){
        this.qrVisable = true
        var QRCode = require('qrcode')
        QRCode.toDataURL(this.form.linkAddress)
          .then(url => {
            var qrbox = document.querySelector("#qrcode");
            qrbox.innerHTML = '';
            const img = new Image();
            img.src=url;
            img.width = 150;
            qrbox.appendChild(img);
          })
          .catch(err => {
            console.error(err)
          })
      }
    },    

4.弹出生成二维码组件

<el-dialog :visible="qrVisable"  width="300px" @close="qrVisable = false">
    <div id="qrcode" style="width:100px; margin-left: 50px;"></div>
 </el-dialog>