给循环的折叠面板van-collapse-item的展开和收起添加文字

被object制裁

于 2023-11-10 11:46:51 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/qq_53847322/article/details/134328446

文章讲述了如何在van-collapse-item组件中动态显示展开和收起的文字提示，通过CSS技巧找到icon关联的盒子并添加自定义伪元素，以实现根据不同状态显示更多或收起。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

如果你在 van-collapse-item中给一个value也可以实现内容的添加，但是当我们循环给他并且判断当前是展开还是收起的时候来显示文字，总找不到一个好的思路

以下思路可参考

找到van-collapse-item中的icon所属的盒子

vant中的逻辑是选择icon并不是更换图标，所以在当前icon展开的时候会有多一个 van-collapse-item__title--expanded。所以我给这个类添加了一个伪元素，因为vant内部给了before，所以我这里给了after，并且调整了的位置。

    /deep/.van-collapse-item__title--expanded .van-cell__right-icon::after {
      content: "收起";
      font-size: 12px;
      width: 24px;
      color: #666666;
      position: absolute;
      right: 20px;
      z-index: 9;
    }
    /deep/ .van-cell__right-icon::after {
      content: "更多";
      font-size: 12px;
      width: 24px;
      color: #666666;
      position: absolute;
      right: 20px;
    }