时间戳

首页 > 解决方案 > 在 Vue 中动态更改手风琴图标

javascript - 在 Vue 中动态更改手风琴图标

问题描述

我使用 Vuetify 在 Vue 中制作了一个扩展面板。我正在使用 firestore 在面板中填充数据，并且我还在面板中提供了一个“标记为完整”的按钮。我的 firestore 查询工作正常，数据得到更新。我无法完成的是更改背景颜色或更改下拉面板的图标，该图标默认设置为向下箭头，在我的数据库更新为用户的图形反馈形式之后。

在此处输入图像描述

正如您在上图中所见，我需要扩展面板将其图标更改为复选标记或单击面板底部右侧的绿色复选标记后整个背景颜色变为绿色。

我试图动态设置面板标题的颜色属性，但它不起作用。下面是我希望它工作的代码。

methods: {
    complete(id) {
      db.collection("orders")
        .doc(id)
        .update({
          status: "deliverd",
        })
        .then(() => {
          console.log("sdf");
        });
    },

标签： javascriptvue.jsvuetify.js

解决方案

我假设您使用的是 Vuetify 中的v-expansion-panel 组件。

问题：动态更改图标或背景颜色v-expansion-panel-header

解决方案：该组件提供了一个名为的道具expand-icon，它允许更改v-expansion-panel-header- 或通过action插槽的图标

<v-expansion-panel-header expand-icon="mdi-check" disable-icon-rotate>
  Item
</v-expansion-panel-header>

<v-expansion-panel-header :expand-icon="icon" disable-icon-rotate>
  Item
</v-expansion-panel-header>

<v-expansion-panel-header disable-icon-rotate>
  Item
  <template v-slot:actions>
    <v-icon color="teal">
      mdi-check
    </v-icon>
  </template>
</v-expansion-panel-header>

<v-expansion-panel-header disable-icon-rotate>
  Item
  <template v-slot:actions>
    <v-icon color="teal">
      {{ icon }}
    </v-icon>
  </template>
</v-expansion-panel-header>

请注意在disable-rotate-icon扩展面板打开时禁用图标旋转。

如果您不确定如何使用 Vue 应用它，我建议您阅读快速入门指南。但是，我在此CodeSandbox Example中使用 vuetify 组件起草了一个快速示例。请将此示例仅视为一个指针，将有 100 种方法如何在应用程序中实现它。像这样，它不打算在生产代码中使用。

推荐阅读