Vue3中PrimeVue手风琴组件切换图标移至左侧的实现方法

直接通过自定义CSS覆盖默认样式即可实现，具体方案如下：

• 若使用全局样式或非作用域组件样式，添加以下代码：

.p-accordion-header {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.p-accordion-header-text {
  margin-right: auto;
}

.p-accordion-header-icon {
  transform: rotate(180deg);
}

.p-accordion-header.p-expanded .p-accordion-header-icon {
  transform: rotate(0deg);
}

• 若使用Vue的<style scoped>作用域样式，需添加深度选择器穿透作用域：

::v-deep .p-accordion-header {
  flex-direction: row-reverse;
  justify-content: space-between;
}

::v-deep .p-accordion-header-text {
  margin-right: auto;
}

::v-deep .p-accordion-header-icon {
  transform: rotate(180deg);
}

::v-deep .p-accordion-header.p-expanded .p-accordion-header-icon {
  transform: rotate(0deg);
}

原理说明：通过flex-direction: row-reverse反转头部元素的排列顺序，再用transform修正图标展开/折叠时的旋转方向，保证交互逻辑和视觉表现一致。

内容的提问来源于stack exchange，提问作者TeamlyDigital