Preview Updated 2026-05-10

QR code

Encode text / URL into an SVG QR code, fully client-side and zero-dependency (Byte mode, auto-selects version 1–40).

Basic usage

value is the string to encode (any UTF-8). ecc controls the error-correction level — higher levels need a denser grid for the same payload but tolerate more damage.

背景

QR 矩阵在客户端实时计算（Byte 模式，自动选版本）。

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfQRCode, CfInput } from '@chufix-design/vue';

const value = ref('https://chufix.com');
</script>
<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfQRCode :value="value" :size="160" ecc="M" />
    <div style="flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px;">
      <CfInput v-model="value" placeholder="输入要编码的文本或 URL" />
      <span style="font-size: 12px; color: var(--fg-3);">QR 矩阵在客户端实时计算（Byte 模式，自动选版本）。</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfQRCode, CfInput } from '@chufix-design/vue';

const value = ref('https://chufix.com');
</script>
<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfQRCode :value="value" :size="160" ecc="M" />
    <div style="flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px;">
      <CfInput v-model="value" placeholder="输入要编码的文本或 URL" />
      <span style="font-size: 12px; color: var(--fg-3);">QR 矩阵在客户端实时计算（Byte 模式，自动选版本）。</span>
    </div>
  </div>
</template>

import { CfQRCode } from '@chufix-design/react';

export default function Demo() {
  const value = 'https://chufix.com';
  return (
    <>
      <CfQRCode value={value} size={160} ecc="M" />
    </>
  );
}

API

Prop	Type	Default	Description
`value`	`string`	`—`	Content to encode (UTF-8)
`ecc`	`'L' \| 'M' \| 'Q' \| 'H'`	`'M'`	Error-correction level (~7% / 15% / 25% / 30%)
`size`	`number`	`160`	Render size (pixels)
`margin`	`number`	`2`	Quiet-zone modules
`color`	`string`	`'currentColor'`	Dark-module color
`background`	`string`	`'transparent'`	Background color

Implementation note: a built-in Byte-mode QR encoder selects the smallest version (1–40) that fits the data. The algorithm is adapted from Project Nayuki’s MIT reference implementation.