floating-button-plugin

Floating Button Plugin

一个轻量级的浮动按钮插件，支持自定义样式、图标和位置。默认显示在页面左下角。

环境要求

• Node.js >= 14.0.0

安装

使用 npm 安装：

npm install floating-button-plugin

或使用 yarn 安装：

yarn add floating-button-plugin

使用方法

基础用法

import FloatingButton from 'floating-button-plugin';

// 创建基础浮动按钮（默认显示在左下角）
new FloatingButton({
    text: '联系我们',
    link: 'https://example.com/contact'
});

带图标的按钮

// 使用 Font Awesome 图标（默认显示在左下角）
new FloatingButton({
    text: '在线客服',
    link: 'https://example.com/service',
    icon: {
        type: 'fontawesome',
        value: 'fas fa-headset'
    }
});

// 使用图片图标（默认显示在左下角）
new FloatingButton({
    text: '微信客服',
    link: 'https://example.com/wechat',
    icon: {
        type: 'url',
        value: 'https://example.com/wechat-icon.png',
        width: '24px'
    }
});

自定义位置

// 右下角
new FloatingButton({
    text: '在线客服',
    link: 'https://example.com/service',
    initialPosition: {
        x: window.innerWidth - 190 - 10,  // 距离右边 10px
        y: window.innerHeight - 70 - 10   // 距离底部 10px
    }
});

// 居中
new FloatingButton({
    text: '技术支持',
    link: 'https://example.com/support',
    initialPosition: {
        x: (window.innerWidth - 190) / 2,  // 水平居中
        y: (window.innerHeight - 70) / 2   // 垂直居中
    }
});

可拖动按钮

// 默认显示在左下角，但可以拖动到任意位置
new FloatingButton({
    text: '在线咨询',
    link: 'https://example.com/chat',
    cursor: 'move'
});

配置选项

ButtonConfig 接口

interface ButtonConfig {
    text: string;                    // 按钮文本
    link: string;                    // 点击跳转链接
    style?: {                        // 自定义样式
        backgroundColor?: string;    // 背景颜色
        color?: string;              // 文字颜色
        fontSize?: string;           // 字体大小
        padding?: string;            // 内边距
        borderRadius?: string;       // 圆角
        boxShadow?: string;          // 阴影
        [key: string]: any;          // 其他 CSS 属性
    };
    icon?: {                         // 图标配置
        type: 'fontawesome' | 'url' | 'base64';  // 图标类型
        value: string;               // 图标值
        width?: string;              // 图标宽度
        height?: string;             // 图标高度
    };
    initialPosition?: {              // 初始位置（默认左下角）
        x: number;                   // X 坐标
        y: number;                   // Y 坐标
    };
    visible?: boolean;               // 是否可见
    debug?: boolean;                 // 是否开启调试模式
    cursor?: 'pointer' | 'move' | 'default';  // 鼠标样式
    hoverScale?: number;             // 悬停放大比例
    onClick?: (event: MouseEvent) => void;  // 点击事件回调
}

默认配置

const defaultConfig: ButtonConfig = {
    text: '联系我们',
    link: 'https://example.com',
    style: {
        position: 'fixed',
        backgroundColor: '#ffffff',
        color: '#1e88e5',
        fontSize: '18px',
        padding: '10px 20px',
        borderRadius: '5px',
        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
        border: '1px solid #1e88e5',
        cursor: 'pointer',
        zIndex: '9999',
        display: 'flex',
        alignItems: 'center',
        gap: '10px',
        transition: 'all 0.2s ease'
    },
    icon: {
        type: 'fontawesome',
        value: 'fas fa-comments',
        width: '18px',
        height: '18px'
    },
    initialPosition: {
        x: 10,  // 距离左边 10px
        y: window.innerHeight - 70 - 10  // 距离底部 10px
    },
    visible: true,
    debug: false,
    cursor: 'pointer',
    hoverScale: 1.05
};

特性

• 默认显示在页面左下角
• 支持自定义样式和图标
• 支持 Font Awesome 图标、图片图标和 Base64 图标
• 支持自定义位置和拖动
• 支持悬停效果和动画
• 支持调试模式
• 支持自定义点击事件
• 响应式设计，适配不同屏幕尺寸

注意事项

• 使用 Font Awesome 图标时，需要先引入 Font Awesome 的 CSS 文件
• 图标大小默认与字体大小相同，可以通过 icon.width 和 icon.height 自定义
• 按钮默认显示在左下角，可以通过 initialPosition 自定义位置
• 所有样式属性都支持自定义覆盖

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge
• Opera

许可证

MIT

配置选项

ButtonConfig 接口

interface ButtonConfig {
  text?: string;                 // 按钮文本
  link?: string;                 // 点击跳转链接
  style?: {                      // 按钮样式
    position: 'fixed',
    left?: string,
    bottom?: string,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '0',
    backgroundColor: 'rgba(240, 240, 240, 0.8)',
    borderRadius: '10px',
    border: '2px solid rgba(173, 216, 230, 0.8)',
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.2)',
    zIndex: '9999',
    transition: 'transform 0.3s ease, box-shadow 0.3s ease',
    cursor: 'pointer',
    width: '190px',
    height: '70px',
    fontSize: '18px',           // 文字大小
    willChange: 'transform',    // 性能优化
    [key: string]: any;         // 其他样式属性
  };
  icon?: {                      // 图标配置
    type: 'url' | 'base64' | 'fontawesome';  // 图标类型
    value: string;              // 图标值
    width?: string;             // 图标宽度（默认与字体大小相同）
    height?: string;            // 图标高度（默认与字体大小相同）
  };
  position?: string;            // 位置，格式：'vertical|horizontal'
                               // vertical: 'top' | 'bottom' | 'center'
                               // horizontal: 'left' | 'right' | 'center'
                               // 默认：'bottom|left'
  offset?: number;             // 边距，默认 10px
  visible?: boolean;           // 是否可见，默认 true
  debug?: boolean;             // 是否开启调试模式，默认 false
  cursor?: 'pointer' | 'move' | 'default';  // 鼠标样式，默认 'pointer'
  hoverScale?: number;         // 悬浮放大比例，默认 1.1
  onClick?: () => void;        // 点击回调函数
  initialPosition?: {          // 初始位置
    x: number;                 // X 坐标
    y: number;                 // Y 坐标
  };
}

默认样式

• 位置：左下角，距离左边和底部各 10px
• 尺寸：190px × 70px
• 背景色：半透明浅灰色（rgba(240, 240, 240, 0.8)）
• 边框：2px 半透明浅蓝色（rgba(173, 216, 230, 0.8)）
• 阴影：0 4px 10px rgba(0, 0, 0, 0.2)
• 文字大小：18px
• 图标大小：默认与文字大小相同

悬浮效果

• 背景：从浅蓝色到深蓝色的渐变（linear-gradient(to bottom, #e8f7ff, #d1eaff)）
• 边框：无
• 阴影：0px 0px 15px rgba(0, 0, 0, 0.3)
• 缩放：1.1 倍

示例

// 基础配置
const button = new FloatingButton({
  text: '联系我们',
  position: 'bottom|right',
  offset: 20
});

// 带图标的配置
const buttonWithIcon = new FloatingButton({
  text: '在线客服',
  icon: {
    type: 'fontawesome',
    value: 'fas fa-headset'
  },
  style: {
    fontSize: '20px'  // 同时会影响图标大小
  }
});

// 自定义样式
const customButton = new FloatingButton({
  text: '微信客服',
  icon: {
    type: 'url',
    value: './wechat-icon.png',
    width: '24px'  // 自定义图标大小
  },
  style: {
    backgroundColor: '#f0f0f0',
    color: '#333333'
  },
  position: 'center|right'
});