二维码悬浮组件

功能特点

• 支持通过URL参数配置（如 ?pos=left-top&iconSize=50px），无需修改代码
• 引入JS即可自动生成悬浮二维码图标，无需额外配置
• 点击图标生成二维码：优先生成选中的文本内容，无选中则生成当前页面URL
• 图标支持自由拖动，位置自动保存（localStorage），刷新页面不丢失
• 支持预设位置关键词（left-top/right-top/left-bottom/right-bottom/center）
• 集成百度统计，可统计组件使用情况
• 轻量化，依赖CDN加载二维码生成库，不占用本地资源

使用方法

1. URL参数配置（推荐）

直接在引入JS的URL后拼接参数，无需定义全局变量：

<!-- 基础使用 - 预设位置 -->
<script src="https://trydone.com/qrcode/qrcode-float.js?pos=left-top"></script>

<!-- 自定义位置+大小 -->
<script src="https://trydone.com/qrcode/qrcode-float.js?initX=80%&initY=30%&iconSize=50px&qrcodeSize=250px"></script>

<!-- 混合使用 -->
<script src="https://trydone.com/qrcode/qrcode-float.js?pos=right-bottom&iconSize=45px"></script>

2. 全局变量配置（兼容原有方式）

<script>
    window.QRCODE_CONFIG = {
        initX: '90%',
        initY: '40%',
        iconSize: '50px',
        qrcodeSize: '250px'
    };
</script>
<script src="https://trydone.com/qrcode/qrcode-float.js"></script>

3. 配置优先级

URL参数 > 全局变量 QRCODE_CONFIG > 默认配置

配置参数说明

参数名	说明	可选值	默认值
pos	预设位置（快捷配置）	left-top/right-top/left-bottom/right-bottom/center	无
initX	图标初始X位置	百分比（如95%）、像素（如20px）、calc表达式	95%
initY	图标初始Y位置	百分比（如50%）、像素（如20px）、calc表达式	50%
iconSize	悬浮图标大小	像素值（如40px、50px）	40px
qrcodeSize	二维码弹窗大小	像素值（如200px、250px）	200px
iconImg	自定义图标	图片URL或base64编码	内置二维码图标