vue 生成二維碼

 

依賴：

npm install --save qrcodejs2

 

code：

<template>
  <div id="hello">
    <input type="text" name="QrCodeUrl" placeholder="QrCodeUrl" v-model="QrCodeUrl">
      <span> <button @click="creatQrCode(QrCodeUrl)">生成二維碼</button></span>
    <hr>
    <div class="qrcode" ref="qrCodeUrl">
    </div>
  </div>
</template>

<script>
  import  QRCode from 'qrcodejs2'
export default {
  name: 'HelloWorld',
  data () {
    return {
      QrCodeUrl:"",

    }
  },
  methods: {
    creatQrCode(QrCodeUrl) {
        //清除之前的二維碼
        this.$refs.qrCodeUrl.innerHTML = ''
        new QRCode(this.$refs.qrCodeUrl, {
        text: QrCodeUrl, // 需要轉換為二維碼的內容
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
  }
}
</script>

<style scoped>
  .qrcode
  {
    display: inline-block;
    img {
      width: 132px;
      height: 132px;
      background-color: #fff;
      padding: 6px;
      box-sizing: border-box;
    }
  }
</style>