[英]Setting focus of an input element in vue.js
我正在尝试在 Vue.js 中设置输入元素的焦点。 我在网上找到了一些帮助,但没有一个解释对我有用。
这是我的代码:
<template>
<form method="post" action="" v-on:submit.prevent="search">
<input type="text" placeholder="Person name" required v-model="name" v-el="nameInput" />
<input type="text" placeholder="Company" required v-model="company" v-el="domainInput" />
<input type="submit" value="Search" class="btn show-m" />
</form>
</template>
<script>
export default {
data () {
return {
contacts: [],
name: null,
company: null
}
},
ready: {
// I tried the following :
this.$$.nameInput.focus();
this.$els.nameInput.focus();
// None of them worked !
}
methods: {
search: function (event) {
// ...
// I also would like to give the focus here, once the form has been submitted.
// And here also, this.$$ and this.$els doesn't work
},
}
}
</script>
我试过this.$$.nameInput.focus();
和this.$els.nameInput.focus();
对于我可以在网上找到的焦点,但是this.$$
是未定义的,并且this.$els
是空的。
如果有帮助,我正在使用 vue.js v1.0.15
谢谢您的帮助。
在 vue 2.x 中,您可以使用指令来解决它。
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
然后您可以在输入和其他元素上使用v-focus
属性:
<input v-focus>
ref
的解决方案。 您可以使用ref/$refs
属性来定位您的输入并将其聚焦。
在示例中,使用了一个简单的方法,该方法可以使用提供给输入的 ref 属性来定位输入。 然后访问实例上的$refs
属性以获取对 DOM 元素的引用。
<script>
export default {
// ...
mounted: function () {
this.focusInput('nameInput');
},
methods: {
// This is the method that focuses the element
focusInput: function ( inputRef ) {
// $refs is an object that holds the DOM references to your inputs
this.$refs[inputRef].focus();
},
search: function (event) {
this.focusInput('domainInput');
},
}
}
</script>
<template>
<form method="post" action="" v-on:submit.prevent="search">
<input type="text" placeholder="Person name" required v-model="name" ref="nameInput" />
<input type="text" placeholder="Company" required v-model="company" ref="domainInput" />
<input type="submit" value="Search" class="btn show-m" />
</form>
</template>
此解决方案最适合一次性情况或可重用组件。 对于更全球化的方法,指令是要走的路。
(对于那些像我一样挣扎了几个小时的人)
家长:
<template>
<div @click="$refs.theComponent.$refs.theInput.focus()">
<custom-input ref="theComponent"/>
</div>
</template>
孩子( CustomInput.vue
):
<template>
<input ref="theInput"/>
</template>
有几个问题。
首先, v-el的定义如下:
<input v-el:input-element/>
这会将变量转换为代码中的 camelCase。 您可以在此处阅读有关此奇怪功能的更多信息。
除此之外,您应该能够通过this.$els.inputElement
访问该变量。 请注意,它只会出现在您定义该元素的组件中(或主应用程序本身,如果您在那里定义它)。
其次,自动对焦似乎不适用于 Firefox (43.0.4),至少在我的机器上是这样。 一切都在 Chrome 上运行良好,并且按预期聚焦。
使用ref
我设法将输入集中在这样的mounted
。
模板 :
<b-form-input v-model="query" ref="searchInput" ></b-form-input>
Javascript:
mounted(){
this.$refs.searchInput.$el.focus()
}
使用自定义指令。
app.directive('focus', {
mounted(el) {
el.focus()
}
})
以下是你如何使用它:
步骤1:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.directive('focus', {
mounted(el) { // When the bound element is inserted into the DOM...
el.focus() // Focus the element
}
})
/* Optional:
Add a slight delay if the input does not focus.
app.directive('focus', {
mounted(el) { // When the bound element is inserted into the DOM...
setTimeout(() => {
el.focus() // Focus the element
}, 500)
}
}) */
await router.isReady()
app.mount('#app')
然后在您的组件中:
第2步:
// MyInput.vue
<input v-focus>
Vue 文档
根据vue 2.x,你也可以在组件本地注册“指令”来获得自动对焦。
只需在组件中编写指令:
export default {
directives: { focus: {
inserted: function (el) {
el.focus()
}
}
}
}
然后在模板中,您可以在任何元素上使用新的 v-focus 属性,如下所示:
<input type="text" v-focus>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.