用vue实现扫描二维码跳转页面功能

时间:2024-02-17 12:42:22

怎么能用vue实现扫描二维码跳转页面功能

1.  安装依赖

npm install vue-qr --save
2.
<template>
  <div>
    <div id="qrcode" ref="qrcode"></div>
  </div> 
</template>
<script>
  import QRCode from \'qrcodejs2\'  // 引入qrcode
  export default {
    name: "qrcode",
    methods: {
      qrcode() {
        let qrcode = new QRCode(\'qrcode\', {
        width: 132,
        height: 132,
        text: \'https://www.baidu.com\'// 需要二维码跳转的地址
        colorDark : "yellow"//前景色
        colorLight : "green"//背景色
      })
      // qrcode.clear() //清除二维码 
      // qrcode.makeCode(\'http://www.4399.com\') //生成另一个新的二维码
      },
    },
    mounted () {
      this.qrcode();
    },
    }
</script>