组合框设计理念

admin

好的，我来为您编写组合框组件的使用文档：

# 组合框组件使用文档

## 基本介绍
组合框是一个下拉选择组件，支持选项列表展示、选项选择等功能。组件采用 PIXI.js 实现，提供了丰富的样式自定义选项。

## 主要特性
- 支持下拉列表展示
- 支持选项选择
- 支持自定义样式（颜色、字体、大小等）
- 支持事件监听
- 支持选项悬停效果
- 支持选中项高亮显示

## 初始化方法
```javascript
var 组合框实例 = new 组合框();
组合框实例.初始化(x, y, 宽度, 高度, 选项);
```

### 参数说明
- `x`: 组件在舞台上的 x 坐标
- `y`: 组件在舞台上的 y 坐标
- `宽度`: 组件宽度
- `高度`: 组件高度
- `选项`: 可选配置对象，包含以下属性：
  ```javascript
  {
      宽度: 200,           // 组合框宽度
      高度: 30,            // 组合框高度
      下拉框高度: 200,     // 下拉列表最大高度
      选项列表: [],        // 选项列表，格式：[{文本: "选项1"}, {文本: "选项2"}]
      当前选中: -1,        // 当前选中项索引
      背景颜色: 0xffffff,  // 背景颜色
      边框颜色: 0xcccccc,  // 边框颜色
      边框宽度: 1,        // 边框宽度
      圆角: 4,            // 圆角大小
      文本颜色: 0x333333,  // 文本颜色
      文本大小: 14,        // 文本大小
      文本字体: 'Arial',   // 文本字体
      选项高度: 30,        // 每个选项的高度
      选项悬停颜色: 0xf5f5f5,  // 选项悬停颜色
      选项选中颜色: 0xe3f2fd,  // 选项选中颜色
      允许穿透: false,     // 是否允许穿透
      调试模式: false,     // 是否启用调试模式
      下拉框偏移: 4        // 下拉框相对于主体的偏移距离
  }
  ```

## 主要方法

### 1. 设置选项列表
```javascript
组合框实例.设置选项列表([
    {文本: "选项1"},
    {文本: "选项2"},
    {文本: "选项3"}
]);
```

### 2. 获取当前选中项
```javascript
var 选中项 = 组合框实例.获取选中项();
// 返回格式：{文本: "选项1"} 或 null（未选中）
```

### 3. 获取当前选中索引
```javascript
var 索引 = 组合框实例.获取选中索引();
// 返回：-1（未选中）或 0 及以上的索引值
```

### 4. 设置当前选中项
```javascript
组合框实例.设置选中项(索引);
// 参数：要选中的选项索引
```

### 5. 获取容器对象
```javascript
var 容器 = 组合框实例.获取容器();
// 返回：PIXI.Container 对象，用于添加到舞台
```

### 6. 销毁组件
```javascript
组合框实例.销毁();
// 清理组件资源
```

## 事件监听
```javascript
组合框实例.获取容器().on('选择改变', function(索引, 选中项) {
    console.log('选中项索引：', 索引);
    console.log('选中项内容：', 选中项);
});
```

## 使用示例
```javascript
// 创建组合框实例
var 组合框实例 = new 组合框();

// 初始化组合框
组合框实例.初始化(100, 100, 200, 30, {
    选项列表: [
        {文本: "选项1"},
        {文本: "选项2"},
        {文本: "选项3"}
    ],
    背景颜色: 0xffffff,
    边框颜色: 0xcccccc,
    文本颜色: 0x333333,
    下拉框偏移: 4
});

// 添加到舞台
app.stage.addChild(组合框实例.获取容器());

// 监听选择改变事件
组合框实例.获取容器().on('选择改变', function(索引, 选中项) {
    console.log('选中：', 选中项.文本);
});
```

## 注意事项
1. 组件需要 PIXI.js 环境
2. 选项列表中的每个选项必须包含 `文本` 属性
3. 组件会自动处理下拉框的显示和隐藏
4. 选中项索引从 0 开始，-1 表示未选中
5. 下拉框会自动计算高度，但不会超过设定的最大高度

## 常见问题
1. 如何设置默认选中项？
   - 在初始化时设置 `当前选中` 选项
   - 或使用 `设置选中项` 方法

2. 如何自定义样式？
   - 在初始化时通过 `选项` 参数设置各种样式属性
   - 所有颜色值使用十六进制格式（如：0xffffff）

3. 如何获取选中项的值？
   - 使用 `获取选中项` 方法获取完整的选中项对象
   - 使用 `获取选中索引` 方法获取选中项的索引

如果您需要更多帮助或有其他问题，请随时告诉我。