选择夹设计理念

admin

好的，我来为您编写选择夹组件的完整文档：

# 选择夹组件文档

## 组件介绍
选择夹是一个标签页组件，支持多个标签页的切换，每个标签页可以包含不同的内容。组件采用 PIXI.js 实现，提供了丰富的样式自定义选项。

## 主要特性
- 支持多个标签页的切换
- 支持标签页内容自定义
- 支持标签样式自定义（颜色、字体、大小等）
- 支持标签悬停效果
- 支持选中标签高亮显示
- 支持事件监听

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

### 参数说明
- `x`: 组件在舞台上的 x 坐标
- `y`: 组件在舞台上的 y 坐标
- `宽度`: 组件宽度
- `高度`: 组件高度
- `选项`: 可选配置对象，包含以下属性：
  ```javascript
  {
      宽度: 400,           // 选择夹宽度
      高度: 300,           // 选择夹高度
      标签高度: 30,        // 标签高度
      标签列表: [],        // 标签列表 [{文本: "标签1", 内容: 容器1}, {文本: "标签2", 内容: 容器2}]
      当前选中: 0,         // 当前选中标签索引
      标签背景颜色: 0xe0e0e0,  // 标签背景颜色（浅灰色）
      标签选中颜色: 0x4a90e2,  // 标签选中颜色（蓝色）
      标签悬停颜色: 0xd0d0d0,  // 标签悬停颜色（深灰色）
      标签边框颜色: 0xcccccc,  // 标签边框颜色
      标签边框宽度: 1,     // 标签边框宽度
      标签圆角: 4,         // 标签圆角大小
      标签文本颜色: 0x333333,  // 标签文本颜色（深灰色）
      标签选中文本颜色: 0xffffff,  // 标签选中文本颜色（白色）
      标签文本大小: 14,     // 标签文本大小
      标签文本字体: 'Arial',   // 标签文本字体
      内容背景颜色: 0xf8f8f8,  // 内容区域背景颜色（浅灰白色）
      内容边框颜色: 0xcccccc,  // 内容区域边框颜色
      内容边框宽度: 1,     // 内容区域边框宽度
      内容圆角: 4,         // 内容区域圆角大小
      允许穿透: false,     // 是否允许穿透
      调试模式: false      // 是否启用调试模式
  }
  ```

## 主要方法

### 1. 设置标签列表
```javascript
选择夹实例.设置标签列表([
    {
        文本: "标签1",
        内容: 容器1  // PIXI.Container 对象
    },
    {
        文本: "标签2",
        内容: 容器2  // PIXI.Container 对象
    }
]);
```

### 2. 获取当前选中标签
```javascript
var 选中标签 = 选择夹实例.获取选中标签();
// 返回格式：{文本: "标签1", 内容: 容器1} 或 null（未选中）
```

### 3. 获取当前选中索引
```javascript
var 索引 = 选择夹实例.获取选中索引();
// 返回：0 及以上的索引值
```

### 4. 设置当前选中标签
```javascript
选择夹实例.设置选中标签(索引);
// 参数：要选中的标签索引
```

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

### 6. 销毁组件
```javascript
选择夹实例.销毁();
// 清理组件资源
```

## 事件监听
```javascript
选择夹实例.获取容器().on('标签切换', function(索引, 标签) {
    console.log('选中标签索引：', 索引);
    console.log('选中标签内容：', 标签);
});
```

## 使用示例
```javascript
// 创建选择夹实例
var 选择夹实例 = new 选择夹();

// 创建标签内容容器
var 内容1 = new PIXI.Container();
var 内容2 = new PIXI.Container();

// 在内容容器中添加一些内容（示例）
var 文本1 = new PIXI.Text("这是标签1的内容", {
    fontFamily: 'Arial',
    fontSize: 16,
    fill: 0x333333
});
文本1.position.set(20, 20);
内容1.addChild(文本1);

var 文本2 = new PIXI.Text("这是标签2的内容", {
    fontFamily: 'Arial',
    fontSize: 16,
    fill: 0x333333
});
文本2.position.set(20, 20);
内容2.addChild(文本2);

// 初始化选择夹
选择夹实例.初始化(100, 100, 400, 300, {
    标签列表: [
        {
            文本: "标签1",
            内容: 内容1
        },
        {
            文本: "标签2",
            内容: 内容2
        }
    ]
});

// 添加到舞台
app.stage.addChild(选择夹实例.获取容器());

// 监听标签切换事件
选择夹实例.获取容器().on('标签切换', function(索引, 标签) {
    console.log('切换到标签：', 标签.文本);
});
```

## 注意事项
1. 组件需要 PIXI.js 环境
2. 标签列表中的每个标签必须包含 `文本` 和 `内容` 属性
3. `内容` 属性必须是 PIXI.Container 对象
4. 标签会自动计算宽度，平均分配
5. 内容区域会自动调整大小
6. 如果没有设置标签列表，会显示一个默认标签
7. 内容区域会自动添加 10px 的边距，避免内容贴边

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

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

3. 如何获取当前标签的内容？
   - 使用 `获取选中标签` 方法获取完整的标签对象
   - 通过标签对象的 `内容` 属性访问内容容器

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