时间戳

首页 > 解决方案 > 如何从 Vuetify v-select 中移除焦点？

vue.js - 如何从 Vuetify v-select 中移除焦点？

问题描述

我遇到了<v-select>来自 Vuetify 的组件的问题。我有一个 v 对话框，当我单击一个按钮时会打开它。这很好用。

在那个 v-dialog 中，有 3 个v-select，每个在它的v-col. 问题是当v-dialog打开时，它会自动将焦点放在第一个v-select上，这很烦人。

我尝试了许多解决方案，甚至设法触发了模糊事件（我在模糊事件中放置了一个控制台日志）。但即使在触发了模糊事件之后，焦点仍停留在该 v-select 上。按照这个截图。 在此处输入图像描述 这是的代码v-select：

<v-select
        ref="selectCommune"
        v-model="commune"
        :items="communes"
        color="info"
        item-color="info"
        label="Commune"
        multiple
        hide-details
        outlined>
    <template v-slot:selection="{ item, index }">
        <v-chip v-if="index === 0">
            <span>{{ item }}</span>
        </v-chip>
        <span
                v-if="index === 1"
        >(+{{ commune.length - 1 }})</span>
    </template>
</v-select>

我试图像这样模糊（）参考，但没有奏效：

this.$nextTick(() => {
         this.$refs.selectCommune.blur()
       })

然后我也尝试了这个触发模糊事件，但焦点仍然停留在 v-select

this.$nextTick(() => {
    setTimeout(() => {
       this.$refs.selectCommune.$el.querySelector(".v-select__selections").firstElementChild.blur()
     })
})

我选择了 v-select__selections 第一个孩子，因为我从 v-select 上触发的 blur 事件中检查了事件目标。

请帮助解决这个问题。我只在 v-dialog 中看到过这种情况。

标签： vue.jsselectfocusvuetify.jsblur

解决方案

您可以尝试使用常规的 html 内容

document.activeElement.blur();

它会完全消除焦点

推荐阅读