如何在PrimeVue Vue3 Composition Api中更改Panel的图标（可切换图标）

Question

//我想更改我正在使用的图标槽的图标，但它正在创建另一个图标而不是编辑该图标

我想更改我正在使用的图标槽的图标，但它正在创建另一个图标而不是编辑该图标

Answer 1

我使用自己的组件通过插槽

#togglericon

和事件

update:collapsed

来更改图标：

<template>
  <Panel
    :header="header"
    toggleable
    @update:collapsed="
      (event) => {
        d_collapsed = event;
      }
    "
  >
    <template #togglericon>
      <span v-if="d_collapsed" class="pi pi-chevron-down"></span>
      <span v-else class="pi pi-chevron-up"></span>
    </template>
    <slot />
  </Panel>
</template>

<script setup>
import Panel from "primevue/panel";
import { ref } from "vue";

defineProps(["header"]);

const d_collapsed = ref(false);
</script>

我认为这不是最好的解决方案。但由于我缺乏经验，我只能想出一个。