# kefu-js

**Repository Path**: web/kefu-js

## Basic Information

- **Project Name**: kefu-js
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-08
- **Last Updated**: 2026-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 客服侧边导航

一个不依赖第三方库的客服悬浮侧边导航组件，支持在线客服、联系电话、手机站点、二维码、在线留言和回到顶部。

## 使用方式

在页面中引入 `kefu.js`：

```html
<script src="kefu.js"></script>
<script>
KefuFloatMenu.init({
  items: [
    { type: 'online', value: '你的QQ号码' },
    { type: 'phone', value: '18866886688' },
    { type: 'qr', value: './imgs/qr.png' },
    { type: 'message', value: '/message' }
  ]
});
</script>
```

`items` 数组中的顺序就是页面中的显示顺序。组件默认会自动在最后添加“回到顶部”按钮。

## 配置项

### 初始化配置

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `container` | String\|Element | `'body'` | 菜单挂载容器，可以传 CSS 选择器或 DOM 元素 |
| `className` | String | `'right_nav'` | 菜单的自定义 class |
| `bottom` | Number | `100` | 菜单距离浏览器底部的距离，单位为 px |
| `topitem` | Boolean | `true` | 是否自动添加“回到顶部”按钮 |
| `items` | Array | 默认在线客服、联系电话 | 要显示的客服项目 |
| `images` | Object | 内置图片地址 | 覆盖各项目的默认图标 |

### items 项目

每个项目至少需要配置 `type`。业务数据统一放在 `value` 中，组件会根据类型解释它的含义。

| `type` | `value` 含义 | 默认标题 | 默认副标题 |
| --- | --- | --- | --- |
| `online` | QQ 号码 | `在线客服` | `在线咨询` |
| `phone` | 电话号码 | `联系电话` | `热线电话` |
| `mobile` | 手机站二维码图片地址 | `手机站点` | `手机扫一扫打开` |
| `qr` | 二维码图片地址 | `二维码` | `扫码查看` |
| `message` | 留言页面地址 | `在线留言` | 无 |
| `top` | 不需要配置 | `回到顶部` | 无 |

每个项目都支持自定义 `title`。`online`、`phone`、`mobile`、`qr` 还支持自定义 `subtitle`：

```javascript
{
  type: 'phone',
  value: '18888888888',
  title: '联系我们',
  subtitle: '服务热线'
}
```

通常不需要手动添加 `top`。如果需要自定义“回到顶部”的标题，可以手动传入：

```javascript
{
  type: 'top',
  title: '返回顶部'
}
```

## 完整示例

```javascript
KefuFloatMenu.init({
  container: 'body',
  className: 'right_nav',
  bottom: 80,
  topitem: true,
  images: {
    online: './imgs/online.png',
    onlineButton: './imgs/rnqq.png',
    phone: './imgs/rnphone.png',
    mobile: './imgs/rnphone.png',
    qr: './imgs/rnqrcode.png',
    message: './imgs/rnmsg.png',
    top: './imgs/rntop.png'
  },
  items: [
    {
      type: 'online',
      value: '123456789',
      title: '在线客服',
      subtitle: '点击 QQ 咨询'
    },
    {
      type: 'phone',
      value: '18888888888'
    },
    {
      type: 'mobile',
      value: './imgs/mobile-qrcode.png'
    },
    {
      type: 'qr',
      value: './imgs/qr.png'
    },
    {
      type: 'message',
      value: '/message'
    }
  ]
});
```

## 隐藏回到顶部

```javascript
KefuFloatMenu.init({
  topitem: false,
  items: [
    { type: 'online', value: '123456789' },
    { type: 'phone', value: '18888888888' }
  ]
});
```

## 方法

### 销毁菜单

```javascript
KefuFloatMenu.destroy();
```

再次调用 `KefuFloatMenu.init(...)` 时，组件会先移除上一次创建的菜单，再创建新的菜单。

## 注意事项

- `items` 不是数组时，会使用默认项目配置。
- 未知的 `type` 会被忽略。
- `message` 没有配置 `value` 时，点击不会跳转。
- `mobile` 和 `qr` 的 `value` 应该是可访问的图片地址。
- “回到顶部”按钮只有在页面滚动超过 100px 后才会显示。