el-collapse 箭头改成文字加箭头

最新推荐文章于 2024-08-14 13:53:33 发布

奈何桥上哈啤酒

最新推荐文章于 2024-08-14 13:53:33 发布

阅读量951

点赞数 2

文章标签： vue.js javascript 前端 css3

本文链接：https://blog.csdn.net/yangpengxunb/article/details/131324411

版权

这段CSS代码展示了如何使用伪元素和内容属性来改变元素`el-icon-arrow-right`的默认状态。当元素处于活动状态时，内容被设置为‘收起’并取消旋转。非活动状态下，图标内容为‘展开’并设置了一个旋转角度。

摘要由CSDN通过智能技术生成

效果：

在css里加入下面代码

 ::v-deep .el-icon-arrow-right:before{
    content: "展开  \e6df";
  }
  ::v-deep .el-icon-arrow-right.is-active:before{
      content: "收起  \e6e1";
  }
  ::v-deep .el-icon-arrow-right.is-active{
    transform: rotate(0deg);
  }
  ::v-deep .el-collapse-item__arrow{
    min-width: 55px;
  }

关注博主即可阅读全文