Vue3 如何生成二维码

二维码效果

安装 @chenfengyuan/vue-qrcode

npm i @chenfengyuan/vue-qrcode -S

vue 代码

<template>
  <div class="wx-share">
    <qrcode-vue :value="url" :options="{ width: size, margin }" />
  </div>
</template>

<script>
import QrcodeVue from "@chenfengyuan/vue-qrcode";

export default {
  name: "wx-share",
  components: {
    QrcodeVue,
  },
  props: {
    url: {
      type: String,
      default: "https://docs.ffffee.com/",
      required: false,
    },
    size: {
      type: Number,
      default: 250, // 设置二维码的尺寸为250px x 250px
    },
    margin: {
      type: Number,
      default: 0, // 二维码的外边距
    },
  },
};
</script>

<style module>
.wx-share {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>