如何解决 v-autocomplete 菜单没有隐藏在移动键盘后面？ （验证）

Posted 2023-02-23

【中文标题】如何解决 v-autocomplete 菜单没有隐藏在移动键盘后面？ （验证）

【英文标题】：How can I solve v-autocomplete menu is not hiding behind mobile keyboard? (vuetify)

【发布时间】：2020-03-19 02:10:59

【问题描述】：

我的 vuetify 项目有问题。我在 vuetify 网站上试过，结果也出现了这个问题。看看这个：

参考：https://vuetifyjs.com/en/components/autocompletes#autocompletes

我的组件是这样的：

<div id="app">
  <v-app id="inspire">
    <div>
      <v-autocomplete
        label="Components"
        :items="components"
      ></v-autocomplete>
    </div>
  </v-app>
</div>

演示和完整代码：https://codepen.io/positivethinking639/pen/GRRLXXP?&editable=true&editors=101

您可以在移动版上试用。这使我无法进行搜索

我该如何解决这个问题？

【参考方案1】：

我检查了这个组件的docs&examples page。它上升是因为屏幕上没有足够的空间。在他们的文档页面上的示例中，它的工作原理相同。这似乎是其原生的正常行为。 .v-menu__content 的 css top 属性会根据可用空间重新计算 (68px -> 12px)。您可以覆盖所有/移动尺寸的样式，例如

.v-menu__content.theme--light.menuable__content__active.v-autocomplete__content 
    top: 68px!important;

虽然我个人不会那样做。

【讨论】：

您个人为什么不想这样做？如果您不这样做，用户将无法搜索自动完成

因为在我看来这是本机行为。他们可以-当您在帖子中看到下拉列表与输入重叠的图片时-焦点实际上是在输入上，用户可以输入符号。虽然最终的选择取决于你。

你是什么意思users can type in symbols？

如果该下拉列表打开，我仍然可以按下按钮，并且符号将出现在输入中，这将导致下拉列表发生变化。

是的。但看起来很奇怪