Quasar Expansion Item：如何给选中的子菜单赋予不同的颜色？

Question

是否可以为扩展项的选定项设置高亮颜色？

          <q-expansion-item
            expand-separator
            v-for="(menu, index) in menus"
            :style="index === 0 && 'margin-top: 20px'"
            :icon="menu.icon"
            :label="menu.title"
            :key="menu.id"
            :expand-icon="menu.subMenus.length === 0 && 'none'"
          >
            <q-expansion-item
              v-for="(sub, index) in menu.subMenus"
              :label="sub"
              expand-icon="none"
              class="sub-content"
            />
          </q-expansion-item>

Answer 1

是的，你可以。由于 quasar 在 HTML DOM 元素上提供了样式化的包装器，因此可以将自定义 CSS 应用于 class，这可以通过在 chrome 开发工具中进行检查来找到。在您的例子中，class 名称是：.q-expansion-item--expanded

将此添加到组件 CSS:

.q-expansion-item--expanded {
    border:1px solid #000000;
    border-color: cyan;
    background-color: cyan;
}

这将在项目展开时添加这些属性。还有一些其他方法可以使用 JS 来解决这个问题。

Quasar Expansion Item：如何给选中的子菜单赋予不同的颜色？

Quasar Expansion Item : How to give a different colour the submenu which is selected?

vue.js

quasar