# ClickableTag 可点击标签组件

一个可点击、带图标的标签组件，支持悬停动画效果。

## 功能特性

- ✅ 支持所有 Element Plus Tag 类型
- ✅ 可自定义左侧图标
- ✅ 可选显示右侧箭头（默认不显示）
- ✅ 可选显示警告图标（默认不显示）
- ✅ 悬停动画效果
- ✅ 点击事件支持

## Props

| 参数       | 说明                       | 类型      | 可选值                              | 默认值                                    |
| ---------- | -------------------------- | --------- | ----------------------------------- | ----------------------------------------- |
| type       | 标签类型                   | string    | success/info/warning/danger/primary | primary                                   |
| size       | 标签大小                   | string    | large/default/small                 | default                                   |
| leftIcon   | 左侧图标组件               | Component | -                                   | undefined                                 |
| middleIcon | 中间图标组件（如警告图标） | Component | -                                   | undefined                                 |
| rightIcon  | 右侧图标组件               | Component | -                                   | DArrowRight（默认双箭头，传 null 不显示） |

## Events

| 事件名 | 说明           | 回调参数 |
| ------ | -------------- | -------- |
| click  | 点击标签时触发 | -        |

## 使用示例

### 基础用法（默认带右侧双箭头）

```vue
<template>
	<ClickableTag type="success"> 成功状态 </ClickableTag>
</template>

<script setup>
import ClickableTag from '/@/components/ClickableTag/index.vue';
</script>
```

### 不显示右侧箭头

```vue
<template>
	<ClickableTag type="success" :right-icon="null"> 成功状态 </ClickableTag>
</template>

<script setup>
import ClickableTag from '/@/components/ClickableTag/index.vue';
</script>
```

### 带左侧图标

```vue
<template>
	<ClickableTag type="warning" :left-icon="Clock"> 待审核 </ClickableTag>
</template>

<script setup>
import ClickableTag from '/@/components/ClickableTag/index.vue';
import { Clock } from '@element-plus/icons-vue';
</script>
```

### 自定义右侧图标

```vue
<template>
	<!-- 使用默认双箭头 -->
	<ClickableTag type="info" :left-icon="Document"> 未填写 </ClickableTag>

	<!-- 自定义右侧图标 -->
	<ClickableTag type="info" :left-icon="Document" :right-icon="More"> 查看更多 </ClickableTag>
</template>

<script setup>
import ClickableTag from '/@/components/ClickableTag/index.vue';
import { Document, More } from '@element-plus/icons-vue';
</script>
```

### 带中间警告图标

```vue
<template>
	<ClickableTag type="warning" :left-icon="Clock" :middle-icon="hasProblem ? WarningFilled : undefined" :right-icon="ArrowRight">
		待审核
	</ClickableTag>
</template>

<script setup>
import { ref } from 'vue';
import ClickableTag from '/@/components/ClickableTag/index.vue';
import { Clock, WarningFilled, ArrowRight } from '@element-plus/icons-vue';

const hasProblem = ref(true);
</script>
```

### 自定义所有图标

```vue
<template>
	<ClickableTag type="primary" :left-icon="User" :middle-icon="Star" :right-icon="More"> 自定义内容 </ClickableTag>
</template>

<script setup>
import ClickableTag from '/@/components/ClickableTag/index.vue';
import { User, Star, More } from '@element-plus/icons-vue';
</script>
```

### 监听点击事件

```vue
<template>
	<ClickableTag type="success" :left-icon="CircleCheck" @click="handleClick"> 审核通过 </ClickableTag>
</template>

<script setup>
import ClickableTag from '/@/components/ClickableTag/index.vue';
import { CircleCheck } from '@element-plus/icons-vue';

const handleClick = () => {
	console.log('标签被点击了');
};
</script>
```

### 配合 Popover 使用

```vue
<template>
	<el-popover placement="right" :width="320" trigger="click">
		<template #reference>
			<ClickableTag type="warning" :left-icon="Clock"> 待审核 </ClickableTag>
		</template>

		<div>这里是弹出的详细信息</div>
	</el-popover>
</template>

<script setup>
import ClickableTag from '/@/components/ClickableTag/index.vue';
import { Clock } from '@element-plus/icons-vue';
</script>
```

## 样式说明

组件自带以下交互效果：

- **悬停效果**：添加阴影
- **右图标动画**：悬停时向右移动 2px，透明度 70%
- **中间图标动画**：带有脉冲动画效果
- **图标大小**：自动跟随 size 属性（small/default/large）
- **响应式**：所有图标垂直居中对齐
- **默认箭头**：右侧默认显示双箭头图标 `DArrowRight`

## 实际应用

在 `src/views/recruit/recruitstudentsignup/index.vue` 中的使用：

```vue
<!-- 自动显示默认的右侧双箭头 -->
<ClickableTag
	v-if="scope.row.zlsh == '1'"
	type="warning"
	:left-icon="Clock"
	:middle-icon="!scope.row.graPic || hasMaterialProblem ? WarningFilled : undefined"
>
  待审核
</ClickableTag>
```

## 图标位置说明

```
[ 左图标 文本内容 中间图标 ⇉ ]
  ↑              ↑        ↑
leftIcon    middleIcon  rightIcon(默认双箭头)
```

- **leftIcon**: 主要图标，表示状态类型
- **middleIcon**: 辅助图标，如警告提示（带脉冲动画）
- **rightIcon**: 交互提示图标，默认为双箭头 `DArrowRight`（悬停时右移，透明度 70%），传 `null` 则不显示
