一个轻量级的浮动按钮插件，支持自定义样式、图标和位置。默认显示在页面左下角。
- Node.js >= 14.0.0
使用 npm 安装：
npm install floating-button-plugin或使用 yarn 安装：
yarn add floating-button-pluginimport 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'
});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
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'
});