elementui的Collapse 摺疊面板箭頭修改方向以及位置
阿新 • • 發佈:2021-06-21
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item name="1"> <span class="collapse-title" slot="title">{{ collapseTitle }}</span> </el-collapse-item> </el-collapse>
data() { return { collapseTitle: "檢視更多", } }
<style lang="scss" scoped> // 使得標題與箭頭位於中間 .collapse-title { // flex: 1 0 90%; //位於左側 flex: 0 1 54%;// 位於中間 order: 1; } ::v-deep .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; }
// 原來是向右側方向的箭頭 // 點選後方向 /deep/ .el-collapse-item__arrow.is-active { transform: rotate(-90deg); } // 預設方向 /deep/ .el-collapse-item__arrow, .el-tabs__nav { transform: rotate(90deg); } </style>