项目使用 Element-ui Collapse 折叠面板,在修改样式后,点击 title展开内容时,content部分,有白色一闪而逝。
<template>
<el-collapse accordion v-model="activeNames" @change="handleChange">
<el-collapse-item v-for="(item, index) in dataList" :name="index">
<template slot="title">
<div class="header_div">
{{item.timeime}} {{item.disc}}
</div>
</template>
<div> <span v-html="text" ></span></div>
</el-collapse-item>
</el-collapse>
</template>
<style scoped>
/deep/ .el-collapse-item__header {
display: flex;
align-items: center;
height: 48px;
line-height: 20px;
padding: 0px 5px;
background-color: transparent;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: border-bottom-color .3s;
outline: none;
color: #fff;
}
/deep/ .el-collapse-item__content {
padding-bottom: 10px;
padding-left: 5px;
font-size: 13px;
color: #FFFFFF;
line-height: 1.769230769230769;
background-color: #1B365C;
}
</style>
原因是el-collapse-item 的内容部分 样式不应该设置 .el-collapse-item__content中,需要在.el-collapse-item__wrap 中修改。
正确姿势如下:
/deep/ .el-collapse-item__header {
display: flex;
align-items: center;
height: 48px;
line-height: 20px;
padding: 0px 5px;
background-color: transparent;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: border-bottom-color .3s;
outline: none;
color: #fff;
}
/deep/ .el-collapse-item__wrap {
background-color: #1B365C;
}
/deep/ .el-collapse-item__content {
padding-bottom: 10px;
padding-left: 5px;
font-size: 13px;
color: #FFFFFF;
line-height: 1.769230769230769;
}
做此记录,提醒下自己,该系统学学的东西,还是要找本教材看看呀。