点击div实现选中效果
先上一份效果图。原来的checked多选框还是存在的,我只不过隐藏了,让他的整个div的范围都是可以点击的,右上角三个点是可以删除当前元素,左下角的播放按钮可以点击播放语音,主要是利用z-index把层次提高一点,就可以了,frame是选中后的意思,动态判断一下,如果checked等于true了,就把这个类加上。
下面是一个div的结构
<div class="items flex">
<div
:class="{item ,'frame':item.checked}"
v-for="(item, index) in list"
:key="index"
>
<a-checkbox
v-model:checked="item.checked"
class="selectVoice"
@change.stop="selectOneChange(item, $event)"
v-show="item.checked"
></a-checkbox>
<a-tooltip placement="right" class="a_tool">
<template #title>
<div class="delete flex">
<div class="btn" @click="deleteOne(item)">删除</div>
</div>
</template>
<span>•••</span>
</a-tooltip>
<div
class="img"
:style="{'background-image': 'url(' + item.head_img_url +')'}">
<div class="time">
{{item.voice_collect_time}}
</div>
<div class="span">
<span>{{item.username}}</span>
</div>
</div>
<a-tooltip placement="top" :overlayClassName="{'tooltip':item.voice_content.length > 100}" :arrowPointAtCenter="true">
<template #title v-if="item.voice_content">
<span>{{item.voice_content}}</span>
</template>
<div class="title">
<img @click.stop="playVoice(item.voice_url,item.voice_duration,item)" src="@/assets/materialManagement/Frame.png" alt="">
<div class="flex audio">
<div class="time-text">00:{{ cTime < 10 ? '0'+ cTime : cTime}}</div>
<div class="bar">
<a-progress :percent="item.percent" :showInfo="false" :stroke-color="{'0%': '#108ee9','100%': '#87d068'}"/>
</div>
<div class="right-time time-text">00:{{item.voice_duration < 10 ?'0'+item.voice_duration:item.voice_duration}}</div>
</div>
</div>
</a-tooltip>
</div>
</div>
主要是这些重写的样式
<style lang="less">
.tooltip {
min-width: 900px !important;
}
.selectVoice{
.ant-checkbox-wrapper .ant-checkbox-inner,
.ant-checkbox .ant-checkbox-inner,
.ant-checkbox-input + .ant-checkbox-inner{
border: transparent !important;
}
// 鼠标hover时候的颜色
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner{
border: transparent !important;
}
// 设置选中的颜色
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
background-color: #ffffff;
border: transparent;
}
}
</style>
下面是整个的样式
.items{
min-width: 1500px;
.item{
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 4px;
width: 24%;
height: 150px;
margin-top: 20px;
margin-left: 1%;
position: relative;
.a_tool{
position: relative;
top: 7%;
right: -88%;
letter-spacing:3px;
z-index: 999;
}
//checked的默认样式
.selectVoice{
position: absolute;
width: 100%;
height: 100%;
display: none;
z-index: 100;
/deep/.ant-checkbox::after {
visibility: hidden !important;
}
}
.delete{
position: absolute;
left: 0;
top: 0;
background-color: rgba(127, 127, 127, 0.498);
height: 32px;
width: 100%;
color: #fff;
justify-content: flex-end;
padding-right: 10px;
display: none !important;
z-index: 50;
.btn{
cursor: pointer;
}
}
.img{
width: 45%;
height: 45%;
position: absolute;
top: 10%;
left: 4%;
background-size: contain;
background-position: left;
background-repeat: no-repeat;
.time{
position: relative;
left: 84px;
top: 45px;
font-size: 18px;
color: rgba(0, 0, 0, 0.685);
}
.span{
position: relative;
left: 85px;
top: -35px;
font-size: 18px;
}
}
.title{
.bar {
width: 70%;
height: 25px;
margin:0 5px;
//播放按钮的样式
img{
position: relative;
left: 15px;
top: 75px;
z-index: 999;
&:hover{
background: url('../../../assets/materialManagement/onFrame.png');
}
}
}
//鼠标移到div上的样式
&:hover{
border-color: rgb(36, 117, 252);
.selectVoice{
display: inline-block !important;
}
.delete{
display: flex !important;
}
}
}
//动态类
.frame{
border: 1px solid rgb(36, 117, 252);
background-image: url('../../../assets/materialManagement/frame-on.png');
background-repeat: no-repeat;
background-position: right bottom;
}