floating-button-plugin

浮动按钮插件

一个可拖拽的浮动按钮插件，支持自定义样式、点击跳转和位置记忆功能。

安装

npm install floating-button-plugin

功能特点

• 可拖拽：用户可以拖动按钮到任意位置（自动限制在屏幕范围内）
• 位置记忆：按钮位置会被保存到 localStorage，刷新页面后保持位置
• 自定义样式：支持自定义按钮的样式、图标和文字
• 点击跳转：可配置点击后跳转的链接
• 显示控制：支持显示/隐藏控制
• 位置控制：支持设置初始位置（上下左右四个角落）
• 边界保护：自动确保按钮始终在屏幕可见范围内

使用方法

基本使用

import FloatingButton from 'floating-button-plugin';

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

完整配置

const button = new FloatingButton({
  // 必填参数
  text: '联系我们',          // 按钮文字
  link: 'https://example.com/contact',  // 点击跳转链接

  // 可选参数
  icon: '/images/icon.png',  // 按钮图标，不传则不显示图标
  position: 'bottom|right',  // 初始位置，默认右下角
  offset: 20,               // 距离边缘的距离（像素），默认 20
  visible: true,            // 是否显示，默认 true
  debug: false,             // 是否开启调试模式，默认 false

  // 自定义样式
  style: {
    backgroundColor: '#42b983',
    color: '#ffffff',
    fontSize: '14px',
    padding: '12px 24px',
    borderRadius: '4px',
    boxShadow: '0 2px 12px rgba(0,0,0,0.1)'
  }
});

位置配置说明

position 参数支持四个值：

• 'top|left': 左上角
• 'top|right': 右上角
• 'bottom|left': 左下角
• 'bottom|right': 右下角（默认）

// 示例：放置在左上角，距离边缘 30px
const button = new FloatingButton({
  text: '联系我们',
  link: 'https://example.com',
  position: 'top|left',
  offset: 30
});

显示控制

// 初始化时隐藏
const button = new FloatingButton({
  text: '联系我们',
  link: 'https://example.com',
  visible: false
});

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

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

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

在 Vue 项目中使用

<script>
import FloatingButton from 'floating-button-plugin';

export default {
  mounted() {
    this.button = new FloatingButton({
      text: '联系我们',
      link: 'https://example.com/contact'
    });
  },
  beforeDestroy() {
    // 组件销毁时记得清理按钮
    if (this.button) {
      this.button.destroy();
    }
  }
}
</script>

调试模式

开启调试模式可以在控制台查看详细的日志信息：

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

注意事项

• 按钮会自动限制在屏幕可见范围内，超出屏幕会自动调整位置
• 位置记忆功能使用 localStorage，如果需要禁用，可以手动清除：localStorage.removeItem('floatingButtonPosition')
• 在组件销毁时记得调用 destroy() 方法清理按钮
• 图片路径建议使用绝对路径
• 按钮的 z-index 默认为 9999，可以通过 style 配置调整

License

MIT