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

@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>