点击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; }
分类:
遇到的小问题
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了