码迷,mamicode.com
首页 > 其他好文 > 详细

elementui的Collapse 折叠面板箭头修改方向以及位置

时间:2021-06-21 20:27:07      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:mod   script   ott   java   标题   pad   ade   lap   cti   

<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>

  

elementui的Collapse 折叠面板箭头修改方向以及位置

标签:mod   script   ott   java   标题   pad   ade   lap   cti   

原文地址:https://www.cnblogs.com/sinceForever/p/14911560.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!