在开发中我们经常会对element-ui进行样式的修改,有时候很难找出相对的样式class名称,以下是可以对el-collapse位置和箭头方向的修改class,如样式不生效可以进行添加样式穿透(deep)
html部分:
<el-collapse accordion class="question-list">
<el-collapse-item class="question-item">
<template slot="title" class="title">title</template>
<div class="text">text</div>
</el-collapse-item>
</el-collapse>
css部分:
<style lang="scss" scoped>
// 使得标题与箭头位于中间
.collapse-title {
// flex: 1 0 90%; //位于左侧
flex: 0 1 54%;// 位于中间
order: 1;
}
.el-collapse {
border: none;
}
// 使得标题与箭头位于内容的下方
.el-collapse-item {
position: relative;
}
::v-deep .el-collapse-item__header {
padding: 20px;
position: absolute;
bottom: -40px;
width: 100%;
// background: red;
}
::v-deep .el-collapse-item__content {
padding-bottom: 0;
}
// 原来是向右侧方向的箭头
// 默认方向
.el-collapse-item__arrow,
.el-tabs__nav {
transform: rotate(90deg);
}
// 点击后方向
/deep/ .el-collapse-item__arrow.is-active {
transform: rotate(-90deg);
}
</style>