描述:
- 当鼠标hover或者点击时,当前元素显示被选中时样式
- 默认选中第一行
- 未选中的元素字体为黑色,且隐藏操作(编辑/删除)按钮
- 选中的元素字体为蓝色,显示操作按钮
- 选中的元素如果可以操作,则操作按钮展示蓝色/红色
- 选中的元素如果不可以操作,则操作按钮展示灰色
实现效果图:
<div class="container-left">
<div :class="{ 'active': itemIndex == index, 'container-left-catelist': true }"
v-for="(item, index) in cateData.cateList" :key="item.hrPerformanceGradeCategoryId"
@click="getGradeList(index, item.hrPerformanceGradeCategoryId)" @mouseenter="enterCateItem($event, index)"
@mouseleave="leaveCateItem($event, index)">
<div class="container-left-catelist-item">{{ item.gradeCategoryName }}</div>
<div
:class="{ 'inactive': itemIndex != index, 'container-left-operatecate': true, 'cannot-operate': item.isUse == 1 }">
<a-space>
<span class="editCateBtn" @click="openOperateCateModal(operateType = 2, item)">编辑</span>
<span class="delCateBtn" @click="delCate(item)">删除</span>
</a-space>
</div>
</div>
<a-button type="dashed" class="addCateBtn" @click="openOperateCateModal(operateType = 1, '')"> + 新增等级分类</a-button>
</div>
const enterCateItem = (e: any, index: any) => {
if (itemIndex.value == index) return
e.currentTarget.classList.add('active')
}
const leaveCateItem = (e: any, index: any) => {
if (itemIndex.value == index) return
e.currentTarget.classList.remove('active')
}
.container-left-catelist {
cursor: pointer;
display: flex;
justify-content: space-between;
padding: 0 1.25rem 0 1.25rem;
margin-bottom: 1.5rem;
//hover时的样式
&:hover {
.container-left-operatecate {
opacity: 1
}
}
.active {
.container-left-catelist-item {
color: #6671FA;
opacity: 1;
}
.editCateBtn {
color: #6671FA;
opacity: 1;
}
.delCateBtn {
color: #F84726;
opacity: 1;
}
}
}
// 分类item未选中的样式
.inactive {
opacity: 0;
}
// 分类item不能编辑时的样式
.cannot-operate {
span {
color: #c6c6c6 !important;
}
}