使用vant组件的折叠面板手风琴样式时，给van-collapse-item设置border-radius无效？

Question

使用vant组件的折叠面板手风琴样式时，给van-collapse-item设置border-radius无效？

Answer 1

让【道友老李】来帮你解答，本回答参考gpt编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

问题分析：

1. van-collapse-item 是 vant 组件库中的折叠面板子组件，用于展示折叠面板的内容。
2. border-radius 是用来设置元素的边框圆角的属性。
3. 在使用 vant 的折叠面板组件时，想要为 van-collapse-item 设置 border-radius，但却发现无效。 解决方法：
4. 使用 vant 提供的 style 插槽来自定义 van-collapse-item 的样式，从而实现设置 border-radius 的效果。
5. 在 style 插槽中添加 van-collapse-item 的样式，并为其设置 border-radius。 示例代码：

<van-collapse v-model="activeNames" accordion>
  <van-collapse-item v-for="(item, index) in items" :key="index">
    <template v-slot:title>
      {{ item.title }}
    </template>
    <template v-slot:style>
      <style scoped>
        .custom-van-collapse-item {
          border-radius: 10px;
        }
      </style>
    </template>
    <div class="custom-van-collapse-item">{{ item.content }}</div>
  </van-collapse-item>
</van-collapse>

通过以上方法，在 vant 的折叠面板组件中为 van-collapse-item 设置 border-radius，就可以实现自定义样式的效果。