点击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;
 }