vue 让链接转化为二维码(两种方法)

法一：

1.全局引入jQuery/qrcode

npm install jquery    

npm install qrcode-npm

2.页面引入jQuery/qrcode

import $ from "jquery";

var QRCode = require('qrcode')

4.页面代码

<input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

3.挂载时写入

mounted(){

QRCode.toDataURL('https://www.baidu.com')
  .then(url => {
   var qrbox = document.querySelector("#qrcode");
   const img = new Image();
   img.src=url;
   qrbox.appendChild(img);
  })
  .catch(err => {
    console.error(err)
  })

},

法二：

步骤：
1、安装qrcodejs2插件，在控制台输入：

npm install qrcodejs2 --save
*注意：这里安装的是qrcodejs2，不是qrcode，否则会报错

2、页面引入——在入口文件（默认是main.js）里引入：

import QRCode from 'qrcodejs2'
3、页面展示
①：在对应的Html页面中，添加html标签

<div id="qrcode" ref="qrcode"></div>
②：配置，在methods方法里配置：

qrcode () {
let qrcode = new QRCode('qrcode',{
width: 200, // 设置宽度，单位像素
height: 200, // 设置高度，单位像素
text: 'https://www.baidu.com' // 设置二维码内容或跳转地址
})
}
③：调用

this.$nextTick(() => {
this.qrcode()
})

 

如需清除上一次生成的(在data里定义： qrcode：null )：

　　makeQrcode (text) {
      if(this.qrcode){
        this.qrcode.clear();
        this.qrcode.makeCode(text);
      }else{
        this.qrcode = new QRCode('qrcode',{
          width: 200, // 设置宽度，单位像素
          height: 200, // 设置高度，单位像素
          text  // 设置二维码内容或跳转地址
        })
      }
    },
    //打开查看
    handleCheck(val){
      this.popCheck={
        title:'扫码查看',
        show:true,
        width:400,
        height:500
      }
      this.$nextTick(() => {
        this.makeQrcode('https://www.baidu.com');
      })
    },