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
• 按钮会自动防止超出屏幕范围
• 在 Vue 组件中使用时，请确保在组件销毁前调用 destroy 方法，避免内存泄漏：

export default {
  beforeDestroy() {  // Vue 2.x
    this.$refs.floatingBtn?.destroy();
  },
  beforeUnmount() {  // Vue 3.x
    this.$refs.floatingBtn?.destroy();
  }
}

Vue 使用方法

Vue 组件方式使用

<template>
  <div>
    <!-- 其他内容 -->
    <floating-button
      text="联系我们"
      link="https://example.com"
      position="bottom|right"
      :offset="20"
      :visible="true"
      :debug="false"
      :icon="{
        type: 'fontawesome',
        value: 'fas fa-phone',
        width: '16px'
      }"
      :style="{
        backgroundColor: '#42b983',
        color: '#ffffff',
        fontSize: '14px',
        padding: '12px 24px',
        borderRadius: '4px',
        boxShadow: '0 2px 12px rgba(0,0,0,0.1)'
      }"
    />
  </div>
</template>

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

export default {
  components: {
    FloatingButton
  }
}
</script>

Vue 实例方法使用

import { createApp } from 'vue'
import FloatingButton from 'floating-button-plugin'

const app = createApp(App)

// 方式一：注册为全局组件，之后可以在任意组件中直接使用 <floating-button> 标签
app.component('floating-button', FloatingButton)

// 方式二：作为插件使用，自动完成全局注册
app.use(FloatingButton)

app.mount('#app')

使用全局注册后，可以在任意组件中直接使用，无需再次导入：

<template>
  <div>
    <!-- 任意组件中都可以直接使用 floating-button -->
    <floating-button
      text="联系我们"
      link="https://example.com"
    />
  </div>
</template>

<script>
export default {
  // 不需要再次 import 和注册组件
  // 已经全局可用
}
</script>

在 Vue 组件中控制按钮

<template>
  <div>
    <floating-button
      ref="floatingBtn"
      text="联系我们"
      link="https://example.com"
    />
    <button @click="toggleButton">切换显示</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleButton() {
      // 通过 ref 访问按钮实例方法
      const btn = this.$refs.floatingBtn;
      btn.setVisible(!btn.visible);
    }
  }
}
</script>

浏览器支持

• Chrome
• Firefox
• Safari
• Edge
• IE11+

许可证

MIT