vue3制作二维码

最新推荐文章于 2025-06-19 10:23:58 发布

原创最新推荐文章于 2025-06-19 10:23:58 发布 · 561 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

1.安装依赖：使用 qrcode 库来生成二维码。

npm install qrcode.vue --save

2.在页面使用

:value="link"：绑定 link 变量的值作为二维码的内容。link 是你要生成二维码的目标链接。
:size="200"：设置二维码的大小为 200 像素。这个属性期望接收一个数字，而你通过绑定 200 来传递。
background-color="#ffffff"：设置二维码的背景颜色为白色。
foreground-color="#000000"：设置二维码的前景颜色（即二维码的图案）为黑色。

<template>
  <qrcode-vue
    :value="link"
    :size="200"
    background-color="#ffffff"
    foreground-color="#000000"
  ></qrcode-vue>
</template>

<script setup>
import { ref } from "vue";
import QrcodeVue from "qrcode.vue";
const link = ref("https://github.com/jin-yufeng/Parser");
</script>