生成二维码图片插件-vue-qrcode

Posted 2022-08-03 JackieDYH

@chenfengyuan/vue-qrcode

该版本有vue3andvue2两个版本，参见官方-使用方式

安装

vue@2
npm install @chenfengyuan/vue-qrcode@1

vue@3
npm install @chenfengyuan/vue-qrcode@2

使用

<template>
  <div class="warp">
    <!-- tag="svg" -->
    <VueQrcode
      :value="qrLink || qrContent"
      :options="QrCodeOpt"
      style="margin: 0 auto"
    ></VueQrcode>
    <hr />
    <span>内容</span>
  </div>
</template>
 
<script>
// 插件直接生成二维码
import VueQrcode from "@chenfengyuan/vue-qrcode";
export default 
  components:  VueQrcode ,
  data() 
    return 
      qrLink: "https://www.baidu.com/",
      qrContent: "123123123",
      QrCodeOpt: 
        errorCorrectionLevel: "H",
        width: 250,
        height: 250,
        quality: 0.3,
        margin: 1,
        // color: 
        //   dark: "#010599FF",
        //   light: "#FFBF60FF",
        // ,
      ,
    ;
  ,
   
;
</script>