二维码美化组件，简单标签，无限可能
<widget-qrcode value="[二维码内容]"></widget-qrcode>
仅需一个HTML标签，即可获得独具个性的二维码！图案随内容实时变化，让二维码更多彩~
支持多种风格模板、颜色自定义、Logo添加等功能，让你的二维码不再单调。
为什么选择我们的二维码组件
简单易用
只需一个HTML标签，无需复杂配置，即可快速集成到任何网站中。
多样风格
提供多种预设模板和自定义选项，满足不同场景和个性化需求。
框架兼容
基于Web Component开发，兼容Vue、React、Angular等主流框架。
实时生成
内容变更时实时更新二维码，所见即所得，提升开发效率。
易于保存
支持直接保存生成的二维码图片，方便用于各种宣传材料。
开源免费
基于MIT协议开源，可自由使用和修改，无需担心版权问题。
自定义你的二维码
实时预览
自定义设置
点击添加/修改渐变颜色
无
0px
粗
点击上传背景图片
支持PNG、JPG、GIF格式
未上传背景图片
点击上传前景图片
支持PNG、JPG、GIF格式（建议带透明通道）
未上传前景图片
点击上传LOGO图片
支持PNG、JPG、GIF格式
未上传LOGO
样例展示
从此世界不再只是黑白...
融合风格
动态文本
菱形风格
液态风格
心形风格
六边形风格
条形风格
闪烁风格
闪烁风格
闪烁风格
使用方法
组件属性
| 属性 | 说明 |
|---|---|
| value | 二维码内容 |
| template | 样式模板,可选：'default','water','diamond','hexagon','star','rect','bar','heart','glitter','stroke','fusion' |
| level | 纠错等级,可选：'M','L','Q','H' |
| width | 二维码宽度，默认：300 |
| height | 二维码高度，默认：300 |
| background-color | 背景色，默认：#ffffff |
| foreground-color | 前景色，默认：#000000;（多色用逗号分隔） |
| inner-color | 定位点内层颜色，默认：#000000 |
| outer-color | 定位点外层颜色，默认：#000000 |
| background-image | 背景图片地址 |
| foreground-image | 前景图片地址 |
| logo | logo图片地址 |
| text | 悬浮文本内容 |
| text-color | 悬浮文本颜色 |
| text-stroke | 悬浮文本描边 |
引入组件
<script type="text/javascript" src="https://www.mbkfw.com/static/lib/tool/widget-qrcode@1.0.4/widget-qrcode.min.js"></script>
使用示例
<!-- 基础用法 -->
<widget-qrcode value="https://example.com"></widget-qrcode>
<!-- 自定义样式 -->
<widget-qrcode
value="https://example.com"
template="heart"
foreground-color="#ff9999"
background-color="#fff7f7"
logo="./logo.png"
text="扫码访问"
text-color="#ff0000"
></widget-qrcode>
评论（可选）：