Vue.js 单击按钮时背景处于打开状态，但不悬停vuejs 解释

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

所以我才明白。 一旦我点击按钮，但不要将鼠标悬停在按钮上，我就会得到效果。

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

这是组件文件

{{功能菜单（语言菜单打开）}
mdi网络
{{language.title}
导出默认值{
名称：“语言”，
数据（）{
返回{
语言菜单打开：false，
语言：[
{标题：“荷兰”}，
{标题：“英语”}，
{标题：“德国”}
],
功能菜单：功能雪佛兰切角（菜单状态）{
如果（菜单状态）{
返回“mdi V向上”
}否则{
返回“mdi V形向下”
}
}
}
}
}
.语言按钮{
高度：45px！重要；
宽度：25px！重要；
背景色：透明！重要；
}
.语言按钮：悬停{
背景色：透明！重要；
}
.语言按钮：悬停：之前{
背景色：透明！重要；
显示：无！重要；
}
.语言下拉列表{
填充：0！重要；
}
.语言下拉列表：悬停：之前{
背景色：透明！重要；
显示：无；
}

任何帮助都将不胜感激。

试试以下方法：

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

---

您声明您的主要目标是正确定位按钮下方的菜单。您不应更改按钮的高度/宽度，而应使用

v-menu

组件的

顶推

、

底推

、

右推

、和/或

左推

道具。这些允许您精确调整菜单的位置。例如，如果要向下移动菜单（按钮下方），请将“微移底部”属性设置为要移动的像素数。请参阅使用此方法的文档，您不需要修改按钮的悬停效果，这将带来更好的用户体验

此外，模板中有一部分效率低下。对于其中一个图标，您有

{{functionMenu（language\u menu\u open）}

。如果可能，您不应该在模板中使用方法，除非将其用作事件处理程序，因为这些方法会破坏Vue的反应引擎。在这种情况下，最好定义

computed

属性，如下所示：

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

---

然后，在模板中使用

{{functionMenu（language\u menu\u open）}

，而不是

{{buttonChevron}

。这将具有与当前函数相同的效果，但Vue将更有效地处理更改。（在此特定组件中，更改可以忽略不计，但这是一个良好的习惯。）您可以阅读更多有关计算属性的信息，问题仍然存在。您可以将其托管在某个位置并共享链接吗？目前不可能查看按钮，看看class

language按钮是否存在。谢谢你，我现在使用的道具是什么。我用{{buttonChevron（）}调用函数。道具不起作用我道歉，我应该写
computed
，而不是
prop
。（我不知道我在想什么）我已经相应地更新了我的答案。正如我前面提到的，除了事件处理程序之外，应该避免模板中的方法。使用
computed
属性而不是方法，您的应用程序将更加高效。