如何在 QButton () 上使用 focus(<q-btn>)？

Question

我在类星体+ Vue 3中开发了一个表单，并希望以编程方式将焦点设置在提交按钮上，以便用户可以按ENTER键提交。

<q-btn ref="btn" />

我认为使用refs会起作用:

this.$refs.btn.focus()

但我得到TypeError: this.$refs.btn.focus is not a function。

如何在QButton上设置对焦?

Answer 1

通过使用$el并在其上设置focus()来检索本机DOM元素:

this.$refs.btn.$el.focus()

一些类星体组件有内置的focus()方法，比如QInput和QSelect，但是QButton没有。

然而，由于QButton组件(<q-btn>)简单地呈现<button>元素作为其根元素，我们可以使用Vue的$el从组件实例(通过$refs)检索它)，然后调用本地JS函数focus():)