# XRadio

基于配置的单选组件，支持从配置中动态加载选项和默认值。

## 何时使用

当需要一个通过配置动态加载的单选控件时使用，特别是选项需要从后端获取的场景。

## 引用方式

```javascript
import XRadio from '@vue2-client/base-client/components/his/XRadio/XRadio'

export default {
  components: {
    XRadio
  }
}
```

## 代码演示

```html
<x-radio
  :queryParamsName="radioConfigName"
  @change="handleChange"
  @init="handleInit">
</x-radio>
```

## API

| 参数              | 说明                   | 类型                | 默认值  |
|-----------------|----------------------|-------------------|------|
| queryParamsName | 查询配置名称              | String/Object     | null |
| value           | 当前选中值（可用于外部控制）      | String/Number     | null |

### 事件

| 事件名    | 说明           | 回调参数                                          |
|--------|--------------|-----------------------------------------------|
| change | 选项变化时的回调    | function(value)                               |
| radio  | 选项变化时的回调（兼容） | function(value)                               |
| init   | 组件初始化完成时的回调  | function({config, options, value})           |

### 配置说明

组件通过 `queryParamsName` 从后端获取配置，配置格式如下：

```json
{
  "radio": [
    {
      "label": "选项A",
      "value": 1
    },
    {
      "label": "选项B",
      "value": 2
    },
    {
      "label": "选项C",
      "value": 3
    },
    {
      "label": "选项D",
      "value": 4
    }
  ],
  "defaultValue": 2
}
```

## 配置示例
----

### 基本配置

```json
{
  "radio": [
    {
      "label": "全部",
      "value": "all",
      "bottomLine": true,
      "indicatorColor": "#1890ff",
      "indicatorWidth": "50%"
    },
    {
      "label": "已过期",
      "value": "expired",
      "bottomLine": true,
      "indicatorColor": "#ff4d4f",
      "indicatorWidth": "70%"
    },
    {
      "label": "30天内",
      "value": "30days",
      "bottomLine": true,
      "indicatorColor": "#52c41a",
      "indicatorWidth": "60%"
    },
    {
      "label": "90天内",
      "value": "90days",
      "bottomLine": false
    },
    {
      "label": "180天内",
      "value": "180days",
      "bottomLine": true,
      "indicatorColor": "#722ed1",
      "indicatorWidth": "30px"
    },
    {
      "label": "360天内",
      "value": "360days",
      "bottomLine": true,
      "indicatorColor": "#eb2f96",
      "indicatorWidth": "40%"
    }
  ],
  "defaultValue": "all",
  "indicator": {
    "showIndicator": true,
    "indicatorHeight": 4,
    "indicatorBgColor": "#f5f5f5",
    "indicatorActiveColor": "#1890ff"
  }
}
```

### 不同线条宽度效果示例

以下是几种常见的线条宽度配置效果：

1. **完整宽度**：`"indicatorWidth": "100%"`（默认值）
   - 线条完全填充选项宽度
   - 适合强调整个选项区域

2. **居中宽度**：`"indicatorWidth": "50%"`
   - 线条占选项宽度的一半，自动居中
   - 提供清晰的视觉提示，同时保持简洁

3. **固定宽度**：`"indicatorWidth": "30px"`
   - 线条使用固定像素宽度，不随选项宽度变化
   - 适合保持所有线条视觉上的一致性

4. **较小宽度**：`"indicatorWidth": "20%"`
   - 线条宽度较小，提供微妙的视觉提示
   - 适合不希望线条过于引人注目的场景

注意事项
----

1. 如果配置中有 `defaultValue`，组件将默认选中该值对应的选项
2. 如果没有 `defaultValue` 但有选项，将默认选中第一个选项
3. 如果外部通过 `value` 属性传入值，优先使用外部值
4. 每个选项可以通过 `bottomLine` 属性控制是否显示底部线条
5. 可以通过 `indicatorColor` 设置线条颜色，线条颜色始终显示，不受选中状态影响
6. 通过 `indicatorWidth` 可以自定义线条宽度
7. 线条宽度仅在其所属选项范围内显示，不会侵入其他选项区域
8. 线条宽度如果设置为百分比值（如"50%"），则是相对于选项宽度计算的
9. 线条默认宽度为"100%"，即完全填充选项宽度
10. 要完全隐藏线条区域，可以在全局配置中设置 `"indicator": false`
11. 要隐藏单个选项的线条，可以为该选项设置 `"bottomLine": false`
12. 全局配置中的 `indicatorHeight` 控制所有线条的高度，单位为像素
13. 推荐为每个选项设置不同颜色，以增强视觉辨识度
14. 线条宽度建议不要设置过小，以免影响用户视觉体验

## 常见问题解答（FAQ）

### 1. 如何控制线条的显示和隐藏？

**全局控制**：
```json
{
  "indicator": false
}
```

**单个选项控制**：
```json
{
  "radio": [
    { "label": "选项A", "value": 1, "bottomLine": true },
    { "label": "选项B", "value": 2, "bottomLine": false }
  ]
}
```

### 2. 线条颜色如何设置？

每个选项可以单独设置线条颜色：
```json
{
  "radio": [
    { "label": "选项A", "value": 1, "indicatorColor": "#1890ff" },
    { "label": "选项B", "value": 2, "indicatorColor": "#52c41a" }
  ]
}
```

也可以设置全局默认颜色：
```json
{
  "indicator": {
    "indicatorActiveColor": "#1890ff"
  }
}
```

### 3. 如何调整线条宽度？

线条宽度可以使用百分比或像素值：
```json
{
  "radio": [
    { "label": "选项A", "value": 1, "indicatorWidth": "50%" },
    { "label": "选项B", "value": 2, "indicatorWidth": "30px" }
  ]
}
```

### 4. 如何调整线条高度？

线条高度在全局配置中统一设置：
```json
{
  "indicator": {
    "indicatorHeight": 5
  }
}
```
