QRCode 二维码

二维码生成组件,支持自定义颜色、尺寸、中心图标

二维码生成组件,支持自定义颜色、尺寸、中心图标

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-qrcode class="demo-qrcode-default" value="https://gitee.com/reglow-ai" />

<!-- 不同尺寸 -->
  <re-qrcode class="demo-qrcode-small" value="small" :size="100" />
  <re-qrcode class="demo-qrcode-medium" value="medium" :size="160" />
  <re-qrcode class="demo-qrcode-large" value="large" :size="240" />

<!-- 自定义颜色 -->
  <re-qrcode class="demo-qrcode-blue" value="blue" color="#0052d9" />
  <re-qrcode class="demo-qrcode-green" value="green" color="#00a870" />
  <re-qrcode class="demo-qrcode-red" value="red" color="#e34d59" />

<!-- 带中心图标 -->
  <re-qrcode class="demo-qrcode-icon" value="with-icon" icon="/static/logo.png" :size="200" />

<!-- 不同内容 -->
  <re-qrcode class="demo-qrcode-url" value="https://www.example.com" />
  <re-qrcode class="demo-qrcode-text" value="Hello World" />
  <re-qrcode class="demo-qrcode-number" :value="12345678" />

<!-- 自定义样式 -->
  <re-qrcode class="demo-qrcode-custom-style" value="custom" customStyle="margin-top: 10px; padding: 10px;" />

<!-- 长文本内容 -->
  <re-qrcode class="demo-qrcode-long" value="这是一段很长的二维码内容文字用于测试长文本的生成效果abcdefg1234567" />

<!-- 大尺寸二维码 -->
  <re-qrcode class="demo-qrcode-xlarge" value="xlarge" :size="300" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-qrcode />。

API

Qrcode Props

名称类型默认值描述必传
valuestring | number""二维码内容N
sizenumber160二维码尺寸(px)N
colorstring"#000000"二维码颜色N
bgColorstring"#FFFFFF"背景色N
borderlessbooleanfalse是否无边框N
iconstring""中心图标地址N
iconSizenumber40中心图标尺寸N
levelstring"M"纠错等级N
statusstring"active"状态N
customStylestring""自定义样式N

Qrcode Events

名称参数描述
refresh-刷新时触发

Qrcode Slots

名称描述
--