以编程方式将焦点设置在 Vuetify 中的按钮上 [英] Programmatically set focus on button in Vuetify

问题描述

每次打开 v-dialog 时，我都试图将其集中在操作按钮上.我尝试使用自动对焦，但它只能工作一次.

I am trying to focus the action buttons in a v-dialog every time it is opened. I tried using autofocus however it only works once.

通常在 Vuetify 中，您可以通过添加引用然后像这样调用 focus() 函数来将焦点设置在元素上:

Normally in Vuetify you can set the focus on an element by adding a reference and then calling the focus() function like this:

<v-text-field ref="refToElement" />

代码:

this.$nextTick(() => this.$refs.refToElement.focus())

但是对于 v-btn 这似乎不起作用.每次显示对话框时，如何使用 javascript 来聚焦 v-btn?

However for v-btn this doesn't seem to work. How can I use javascript to focus the v-btn every time the dialog is shown?

推荐答案

要将焦点设置在 v-btn 上，您可以在引用后添加 $el.例如

To set the focus on a v-btn you can add $el after the reference. For example

this.$nextTick(() => this.$refs.refToElement.$el.focus())

对话框和焦点按钮的完整代码笔:https://codepen.io/cby016/pen/eQXoBo.

Full codepen of dialog and focused button: https://codepen.io/cby016/pen/eQXoBo.

对于 Vuetify 2.x 试试这个

For Vuetify 2.x try this

watch: {
  dialog () {
    if (!this.dialog) return
    requestAnimationFrame(() => {
      this.$refs.refToElement.$el.focus()
    })
  }
},

这篇关于以编程方式将焦点设置在 Vuetify 中的按钮上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！