# XTitle 组件

## 概述

XTitle 是一个多功能的标题组件，可以显示标题文本或按钮，支持自定义下划线样式、颜色和宽度。

## 功能特点

- 支持显示标题或按钮
- 支持为标题添加下划线
- 支持自定义下划线颜色
- 支持自定义宽度
- 支持点击事件触发

## 使用方法

### 基本用法

```vue
<x-title query-params-name="我的标题-title"></x-title>
```

### 配置参数格式

XTitle 组件通过一个字符串参数进行配置 

各部分说明：

1. `标题文本`: 显示的文本内容
2. `类型`: 可选值为 `title` 或 `button`
3. `点击事件名`: 点击时触发的事件名称
4. `线条`: 设置为 `line` 时显示下划线
5. `颜色`: 下划线的颜色（如 `red`、`#FF0000`）
6. `宽度`: 组件宽度，单位为像素（如 `800`）

## 使用示例

### 1. 基本标题

```vue
<x-title query-params-name="患者信息-title"></x-title>
```

### 2. 带下划线的标题

```vue
<x-title query-params-name="患者信息-title--line"></x-title>
```

### 3. 自定义下划线颜色和宽度

```vue
<x-title query-params-name="患者信息-title--line-red-800"></x-title>
```

### 4. 带点击事件的标题

```vue
<x-title query-params-name="患者信息-title-showPatient-line" @showPatient="handleShowPatient"></x-title>
```

### 5. 按钮模式

```vue
<x-title query-params-name="提交-button-submit" @submit="handleSubmit"></x-title>
```

## 事件

当组件类型为 `button` 或在标题配置中设置了点击事件名时，点击组件会触发相应的事件。

```vue
<template>
  <x-title query-params-name="提交-button-submit" @submit="handleSubmit"></x-title>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      // 处理提交逻辑
      console.log('提交按钮被点击');
    }
  }
}
</script>
```

## 样式自定义

组件内部样式已预设，但可以通过父级样式或特定类名进行覆盖：

```vue
<template>
  <div class="custom-container">
    <x-title query-params-name="自定义标题-title"></x-title>
  </div>
</template>

<style scoped>
.custom-container :deep(.x-title) {
  font-size: 20px;
  color: blue;
}
</style>
```

## 注意事项

1. 当未指定类型时，默认为 `title` 类型
2. 线条颜色需要是合法的 CSS 颜色值
3. 宽度值必须是数字，单位为像素
4. 组件默认宽度为 100%，设置自定义宽度时会覆盖此值
