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 使用方法

全局加载使用

<!-- 在 HTML 文件中直接引入 -->
<script src="https://unpkg.com/floating-button-plugin/dist/floating-button.min.js"></script>

<script>
// 全局变量方式使用
const button = new FloatingButton({
  text: '联系我们',
  link: 'https://example.com'
});

// 或者在 Vue 的 mounted 钩子中使用
mounted() {
  const button = new FloatingButton({
    text: '联系我们',
    link: 'https://example.com'
  });
}
</script>

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+

NPM 发布说明

准备工作

• 确保已有 npm 账号，如果没有请先注册：

npm adduser

• 登录 npm：

npm login

发布步骤

• 更新 package.json 中的版本号：

npm version patch  # 小版本更新
npm version minor  # 次版本更新
npm version major  # 主版本更新

• 发布到 npm：

npm publish

发布配置

在 package.json 中添加以下配置：

{
  "name": "floating-button-plugin",
  "version": "1.0.0",
  "description": "一个简单易用的浮动按钮插件",
  "main": "dist/floating-button.js",
  "module": "dist/floating-button.esm.js",
  "types": "dist/types/index.d.ts",
  "files": [
    "dist",
    "src"
  ],
  "keywords": [
    "floating-button",
    "vue",
    "javascript",
    "ui",
    "component"
  ],
  "publishConfig": {
    "access": "public"
  }
}

发布注意事项

• 发布前确保代码已经编译打包
• 确保 package.json 中的版本号已更新
• 确保 .npmignore 文件正确配置，避免发布不必要的文件
• 使用 npm publish --dry-run 可以模拟发布过程
• 发布后可以通过 npm info floating-button-plugin 查看包信息

许可证

MIT