# 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` 则不显示
