效果图如下:
实现代码如下:
<!--template里的代码,样式布局自行调整-->
<template>
<div class="soft-setting-list-div" v-for="(item,index) in softSettingList">
<div style="padding-left: 10px;font-size: 12px" @click="selectSoftSetting(item.id,index)">
<div class="soft-setting-icon">
<i class="el-icon-edit-outline" style="font-size: 16px;color: #808080;margin-right: 10px"></i>
<i class="el-icon-delete" style="font-size: 16px;color: #808080"></i>
</div>
<p >{
{
item.settingName }}</p>
<p style="margin-top: -25px">{
{
item.renderSoft }}</p>
<p style="margin-top: -25px">{
{
item.selectPlugs }}</p>
</div>
</div>
</template>
//script里的代码
<script>
export default {
data(){
return{
softSettingList:[
{
id:'1',settingName:'666',renderSoft:'Maya2023',selectPlugs:'vrayformaya 5.20.02'},
{
id:'2',settingName:'888',renderSoft:'Maya2023',selectPlugs:'vrayformaya 5.20.02'},
{
id:'3',settingName:'888',renderSoft:'Maya2023',selectPlugs:'vrayformaya 5.20.02'},
{
id:'4',settingName:'888',renderSoft:'Maya2023',selectPlugs:'vrayformaya 5.20.02'},
],
};
},
mounted() {
//进入页面默认选中
this.$nextTick(() => {
if (document.getElementsByClassName("soft-setting-list-div").length > 0){
document.getElementsByClassName("soft-setting-list-div")[0].style.backgroundColor="#5cb6ff"
}
})
},
methods:{
//选中
selectSoftSetting(data,index){
if(document.getElementsByClassName("soft-setting-list-div")[index].style.backgroundColor="#5cb6ff" || document.getElementsByClassName("soft-setting-list-div")[index].style.backgroundColor==""){
for(let item of document.getElementsByClassName("soft-setting-list-div")){
item.style.backgroundColor="";
}
document.getElementsByClassName("soft-setting-list-div")[index].style.backgroundColor="#5cb6ff";
}else{
document.getElementsByClassName("soft-setting-list-div")[index].style.backgroundColor=""
}
}
}
}
</script>
//css
<style scoped>
.soft-setting-list-div{
height: 130px;
width: 190px;
/*display: flex;*/
/*align-items: center;*/
/*justify-content: center;*/
/*border: 1px solid #4DD52B;*/
border: 1px solid #808080;
border-radius: 5px;
cursor: pointer;
margin-right: 8px;
margin-bottom: 5px;
.soft-setting-list-div .soft-setting-icon{
visibility: hidden;
float: right;
margin-top: -10px;
margin-right: 10px;
}
.soft-setting-list-div:hover .soft-setting-icon{
visibility: inherit;
float: right;
margin-top: -10px;
margin-right: 10px;
}
</style>