floating-button-plugin

Floating Button Plugin

一个简单易用的浮动按钮插件，支持拖拽、自定义样式、位置记忆等功能。

特性

• 支持拖拽功能，可自由调整按钮位置
• 自动记忆按钮位置，刷新页面后保持位置不变
• 灵活的位置设置，支持上、下、左、右、中心等多种组合
• 丰富的图标支持，包括在线图片、Base64、Font Awesome 图标
• 可自定义按钮样式，包括背景色、文字颜色、大小等
• 支持显示/隐藏控制
• 防止按钮超出屏幕范围
• 支持调试模式，方便开发

安装

npm install floating-button-plugin

使用方法

基础用法

import FloatingButton from 'floating-button-plugin';

const button = new FloatingButton({
  text: '联系我们',
  link: 'https://example.com'
});

完整配置示例

const button = new FloatingButton({
  text: '联系我们',
  link: 'https://example.com',
  position: 'bottom|right',  // 支持 'top|left', 'right|center' 等灵活组合
  offset: 20,
  visible: true,
  debug: false,
  icon: {
    type: 'url',  // 'url' | 'base64' | 'fontawesome'
    value: 'https://example.com/icon.png',
    width: '20px',
    height: '20px'
  },
  style: {
    backgroundColor: '#42b983',
    color: '#ffffff',
    fontSize: '14px',
    padding: '12px 24px',
    borderRadius: '4px',
    boxShadow: '0 2px 12px rgba(0,0,0,0.1)'
  }
});

位置设置

支持的位置组合：

• top|left: 左上角
• top|center: 顶部中间
• top|right: 右上角
• center|left: 左侧中间
• center|center: 正中心
• center|right: 右侧中间
• bottom|left: 左下角
• bottom|center: 底部中间
• bottom|right: 右下角

const button = new FloatingButton({
  text: '联系我们',
  link: 'https://example.com',
  position: 'center|right',  // 右侧中间
  offset: 20  // 距离边缘的偏移量
});

图标配置

支持三种类型的图标：

• 在线图片 URL：

const button = new FloatingButton({
  text: '联系我们',
  icon: {
    type: 'url',
    value: 'https://example.com/icon.png',
    width: '20px',  // 可选
    height: '20px'  // 可选
  }
});

• Base64 图片：

const button = new FloatingButton({
  text: '联系我们',
  icon: {
    type: 'base64',
    value: 'iVBORw0KGgoAAAANSUhEUgAA...',  // Base64 图片编码
    width: '20px',
    height: '20px'
  }
});

• Font Awesome 图标：

const button = new FloatingButton({
  text: '联系我们',
  icon: {
    type: 'fontawesome',
    value: 'fas fa-phone',  // Font Awesome 类名
    width: '16px'  // 控制图标大小
  }
});

Font Awesome 说明：

• 使用 fontawesome 类型时，插件会自动从 CDN 加载 Font Awesome 6.0.0
• 无需手动安装或引入 Font Awesome 包
• 支持所有免费版图标，包括 Solid (fas)、Regular (far) 和 Brands (fab)
• 图标名称可以在 Font Awesome 官网 查找
• 示例：
  • 实心电话图标：fas fa-phone
  • 空心信封图标：far fa-envelope
  • GitHub 图标：fab fa-github

控制方法

// 显示按钮
button.show();

// 隐藏按钮
button.hide();

// 切换显示状态
button.setVisible(true | false);

// 销毁按钮
button.destroy();

调试模式

开启调试模式可以在控制台查看按钮的操作日志：

const button = new FloatingButton({
  text: '联系我们',
  link: 'https://example.com',
  debug: true  // 开启调试模式
});

注意事项

• 位置记忆功能使用 localStorage，确保您的网站支持该特性
• 使用 Font Awesome 图标时会自动加载 Font Awesome CDN
• 图片图标建议使用 HTTPS 链接
• 大图片建议使用 URL 方式加载，小图片（< 10KB）可以使用 Base64
• 按钮会自动防止超出屏幕范围

浏览器支持

• Chrome
• Firefox
• Safari
• Edge
• IE11+

许可证

MIT