recruit
This commit is contained in:
guochunsi
225
src/components/ClickableTag/README.md
Normal file
225
src/components/ClickableTag/README.md
Normal file
@@ -0,0 +1,225 @@
|
||||
# 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` 则不显示
|
||||
119
src/components/ClickableTag/index.vue
Normal file
119
src/components/ClickableTag/index.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<el-tag
|
||||
:type="type"
|
||||
:size="size"
|
||||
:class="['clickable-tag', { 'has-action': actualRightIcon !== null }]"
|
||||
@click="handleClick">
|
||||
<!-- 左侧图标 -->
|
||||
<el-icon
|
||||
v-if="leftIcon"
|
||||
:size="size"
|
||||
class="left-icon">
|
||||
<component :is="leftIcon" />
|
||||
</el-icon>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<slot></slot>
|
||||
|
||||
<!-- 中间图标（如警告图标） -->
|
||||
<el-icon
|
||||
v-if="middleIcon"
|
||||
:size="size"
|
||||
class="middle-icon">
|
||||
<component :is="middleIcon" />
|
||||
</el-icon>
|
||||
|
||||
<!-- 右侧图标 -->
|
||||
<el-icon
|
||||
v-if="actualRightIcon !== null"
|
||||
:size="size"
|
||||
class="right-icon">
|
||||
<component :is="actualRightIcon" />
|
||||
</el-icon>
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Right } from '@element-plus/icons-vue'
|
||||
|
||||
interface Props {
|
||||
type?: 'success' | 'info' | 'warning' | 'danger' | 'primary'
|
||||
size?: 'large' | 'default' | 'small'
|
||||
leftIcon?: any // 左侧图标组件
|
||||
middleIcon?: any // 中间图标组件（如警告图标）
|
||||
rightIcon?: any // 右侧图标组件（默认为 Right null 则不显示）
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'primary',
|
||||
size: 'default',
|
||||
leftIcon: undefined,
|
||||
middleIcon: undefined,
|
||||
rightIcon: undefined
|
||||
})
|
||||
|
||||
// 获取实际的右侧图标：未传值时使用默认图标，传 null 则不显示
|
||||
const actualRightIcon = computed(() => {
|
||||
if (props.rightIcon === null) return null
|
||||
return props.rightIcon || Right
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: []
|
||||
}>()
|
||||
|
||||
const handleClick = () => {
|
||||
emit('click')
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'ClickableTag'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.clickable-tag {
|
||||
transition: all 0.2s;
|
||||
|
||||
// 覆盖 el-tag 的内部结构
|
||||
:deep(.el-tag__content) {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
// 有交互功能时才显示手型光标和悬停效果
|
||||
&.has-action {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.right-icon {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.middle-icon {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user