# js-droper-menu

**Repository Path**: utobang_admin/js-droper-menu

## Basic Information

- **Project Name**: js-droper-menu
- **Description**: DroperCom 是一个基于原生 JavaScript 和 CSS 实现的下拉菜单组件，参考了 ElementUI 中的下拉菜单组件设计。该组件提供了丰富的功能，包括数据驱动的菜单项渲染、创建新项、编辑和删除菜单项等。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-06
- **Last Updated**: 2025-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# js-droper-menu

#### 介绍
DroperCom 是一个基于原生 JavaScript 和 CSS 实现的下拉菜单组件，参考了 ElementUI 中的下拉菜单组件设计。该组件提供了丰富的功能，包括数据驱动的菜单项渲染、创建新项、编辑和删除菜单项等。
## 1. 项目概述
DroperCom 是一个基于原生 JavaScript 和 CSS 实现的下拉菜单组件，参考了 ElementUI 中的下拉菜单组件设计。该组件提供了丰富的功能，包括数据驱动的菜单项渲染、创建新项、编辑和删除菜单项等。

## 2. 实现功能
1. **基础下拉菜单**：支持基本的下拉菜单显示和选择功能
2. **数据驱动渲染**：根据提供的数据动态渲染菜单项
3. **创建新项**：当菜单数据为空时，提供创建新项的功能
4. **编辑功能**：支持对菜单项进行编辑操作
5. **删除功能**：支持删除指定的菜单项
6. **事件系统**：提供完整的事件系统，支持自定义事件处理
7. **样式定制**：提供美观的默认样式，支持进一步定制

## 3. 技术特点
- **原生实现**：使用原生 JavaScript 和 CSS 实现，无第三方框架依赖
- **组件化设计**：采用现代组件化设计理念，代码结构清晰
- **事件驱动**：内置完整的事件系统，支持灵活的事件处理
- **响应式设计**：支持不同屏幕尺寸的设备
- **可访问性**：遵循可访问性标准，提供良好的用户体验

## 4. 文件结构
```
DroperCom/
├── DroperCom.js          # 组件核心代码
├── DroperCom.css         # 组件样式
├── index.html            # 演示页面
├── readme.md             # 说明文档
```

## 5. 使用方法
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="DroperCom.css">

<!-- 创建容器 -->
<div id="droper"></div>

<!-- 引入脚本 -->
<script src="DroperCom.js"></script>

<!-- 初始化组件 -->
<script>
const droper = new DroperCom(document.getElementById('droper'), {
    placeholder: '请选择颜色组',
    data: [
        { text: '颜色组1', icon: 'iconfont icon-color' },
        { text: '颜色组2', icon: 'iconfont icon-color' }
    ]
});
</script>
```

## 6. API 接口
### 6.1 构造函数
```javascript
new DroperCom(element, options)
```
#### 参数说明
- `element` - 组件挂载的 DOM 元素
- `options` - 组件配置选项

```javascript
options = { 
    creatable: false,     // 是否可创建新项 
    createText: "创建新组", // 创建新项文本 
    createIcon: "iconfont icon-plus", // 创建新项图标 
    showIcon: true,           // 是否显示项图标
    itemIcon: "iconfont icon-color",  // 项图标 
    itemText: "颜色组",    // 项文本 
    placeholder: "请选择颜色组", // 占位符 
    width: "100%",        // 宽度 
    name: "groupSelect",  // 组件名称 
    id: "",               // 组件id 
    editable: true,       // 是否可编辑 
    delable: true,        // 是否可删除 
    showArrow: true,      // 是否显示下拉箭头 
    placement: "bottom",  // 下拉菜单位置 
    offset: {x:0, y:0},   // 下拉菜单偏移量 
    changeHandler: null,  // 选择改变事件处理函数 
    data: []              // 菜单数据 
};

### 6.2 实例方法
- `open()` - 打开下拉菜单
- `close()` - 关闭下拉菜单
- `toggle()` - 切换下拉菜单状态
- `update(data)` - 更新菜单数据
- `setItems(data)` - 设置菜单项
- `addItem(item)` - 添加菜单项
- `removeItem(index)` - 删除指定索引的菜单项
- `editItem(index)` - 编辑指定索引的菜单项
- `destroy()` - 销毁组件
- `on(event, handler)` - 绑定事件
- `emit(event, data)` - 触发事件