在 Vue 3 中，使用 PrimeVue，有没有办法在单击时将汉堡菜单按钮更改为 X？

Question

使用 Menubar 组件，在缩小浏览器时会自动显示汉堡菜单 window。但是，单击该按钮后，我想将图标从 pi-bars 更改为 pi-times。有办法吗？

我什至不确定如何访问代码中的按钮。 https://www.primefaces.org/primevue/#/menubar 的例子也没有解释。

Answer 1

一种方法是使用 CSS。当 mobile-mode 菜单打开时，菜单会应用 .p-menubar-mobile-active class，并且图标 (<i>) 是 .p-menubar-button 的后代。将图标的::before内容改为\e90b，即pi-times的字符编码：

<style>
.p-menubar.p-menubar-mobile-active .p-menubar-button i::before {
  content: "\e90b"; /* pi-times icon */
}
</style>

demo

在 Vue 3 中，使用 PrimeVue，有没有办法在单击时将汉堡菜单按钮更改为 X？

In Vue 3, using PrimeVue, is there a way to change the hamburger menu button to a X when clicked?

typescript

vue.js

primevue