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');
      })
    },