单击时按钮上有背景但不悬停vuejs

Question

说明

我在按钮中有一个图标，单击该图标会打开一个菜单。 如果我想在按钮下正确获取菜单，我需要更改高度，因为似乎没有其他选项（边距不起作用）。但后来我得到了背景悬停效果，而不是悬停在按钮上。

这样理解。 一旦我点击按钮但不将鼠标悬停在按钮上，我就会得到效果。

形状是因为我改变了高度和宽度。 背景颜色：透明！重要；没用

这是组件文件

<template>
  <v-menu
          :close-on-click="true"
          offset-y
          transition="slide-y-transition"
          v-model="language_menu_open"
          return-value="language_menu_open = false">
    <template v-slot:activator="{ on }">
      <v-btn
              v-on="on"
              v-ripple="false"
              icon
              depressed
              class="language-button">
          <v-icon>{{functionMenu(language_menu_open)}}</v-icon>
          <v-icon style="margin-right: 10px !important;">mdi-web</v-icon>
      </v-btn>
    </template>
    <v-list class="language-dropdown">
      <v-list-item
                  v-for="language in languages"
                  :key="language.title"
                  v-ripple="false"
                  @click="language">
        <v-list-item-title>{{language.title}}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
  export default {
    name: "Languages",
    data() {
      return {
        language_menu_open: false,
        languages: [
          {title: "Nederlands"},
          {title: "English"},
          {title: "Deutsch"}
        ],
        functionMenu: function chevronChanger(menu_state) {
          if (menu_state) {
            return "mdi-chevron-up"
          } else {
            return "mdi-chevron-down"
          }
        }
      }
    }
  }
</script>

<style scoped>
  .language-button {
    height: 45px !important;
    width: 25px !important;
    background-color: transparent !important;
  }

  .language-button:hover {
    background-color: transparent !important;
  }

  .language-button:hover:before {
    background-color: transparent !important;
    display: none !important;
  }

  .language-dropdown {
    padding: 0 !important;
  }

  .language-dropdown:hover:before {
    background-color: transparent !important;
    display: none;
  }
</style>

任何帮助将不胜感激。

Answer 1

您说您的主要目标是正确定位按钮下方的菜单。您应该使用v-menu 组件的nudge-top、nudge-bottom、nudge-right 和/或nudge-left 属性，而不是更改按钮的高度/宽度。这些允许您精确调整菜单的位置。例如，如果您想向下移动菜单（在按钮下方），请将 nudge-bottom 属性设置为您希望它移动的像素数。参见文档here. 使用这种方式，您无需修改​​按钮的悬停效果，从而带来更好的用户体验。

此外，您的模板中有一部分效率低下。对于其中一个图标，您有{{functionMenu(language_menu_open)}}。如果可能的话，你不应该在模板中使用除了事件处理程序之外的方法，因为方法会破坏 Vue 的响应引擎。在这种情况下，最好定义一个computed 属性，如下所示：

computed: {
  buttonChevron: function() {
    if (this.language_menu_open) {
      return "mdi-chevron-up"
    } else {
      return "mdi-chevron-down"
    }
  }
}

然后，在您的模板中，使用{{ buttonChevron }} 而不是{{functionMenu(language_menu_open)}}。这将与您当前的函数具有相同的效果，但 Vue 将更有效地处理更改。 （在这个特定的组件中，变化可以忽略不计，但这是一个养成的好习惯。）你可以阅读更多关于计算属性的信息here.

Answer 2

试试这个：

.language-button:active {
    background-color: transparent !important;
}