javascript - 打开对话框时在对话框内设置焦点文本字段
问题描述
我有自定义文本字段,打开对话框时我必须关注它的功能。我尝试使用 vue.js 聚焦它refs
:
代码:
<v-app id="app">
<v-row align="center">
<v-col class="text-center" cols="12">
<v-btn color="primary" @click="openDialog()">Open dialog</v-btn>
</v-col>
</v-row>
<v-dialog v-model="dialog">
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Dialog
</v-card-title>
<v-card-text>
<v-row>
<v-col cols="6" class="ml-2">
<v-text-field
ref="name"
placeholder="Enter your name..."
type="text"
solo
flat
outlined
></v-text-field>
<v-btn
color="indigo"
dark
@click = "setFocusName()"
>Set focus</v-btn>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-dialog>
</v-app>
Javascript:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
dialog: false
}
},
methods: {
setFocusName() {
this.$refs.name.focus();
},
openDialog() {
this.dialog = !this.dialog
this.setFocusName()
}
}
});
当我单击打开对话框按钮时,我的文本字段没有聚焦。在这里你可以看到我的完整代码笔
打开对话框时如何正确聚焦?
解决方案
您的代码的问题是您试图在$ref
实际呈现之前访问它,这是一个带有工作代码的沙箱:
https ://codepen.io/Djip/pen/ZEYezzm?editors=1011
为了解决这个错误,我添加了一个setTimeout
在对话框打开 0.2 秒后触发焦点。我第一次尝试使用$nextTick
,但这还不足以完成这项工作 - 您可以尝试调整计时器,使其尽可能低。
setFocusName() {
this.$refs.name.focus();
},
openDialog() {
this.dialog = !this.dialog
setTimeout(() => {
this.setFocusName()
}, 200)
}
推荐阅读
- nmap - Nmap 不返回网络协议
- unity3d - Hololens 空间映射碰撞 - 混合现实工具包
- amazon-web-services - CodeDeploy 挂钩代理安装文件夹中的运行脚本
- haskell - Is there a convenient way to use a pattern as a predicate function?
- javascript - 将一个对数组中的对象进行计数的函数放入另一个函数中
- c# - 将数据传递给 Vue.js 组件
- tensorflow - 在应用 grads 之前,如何将 Tensorflow 2 Keras 优化器设置为一个状态?
- unit-testing - 在 Pycharm 中运行 PyTest 测试
- sql - DBVis/PL SQL: IF EXIST - 如果可能,如何正确构建
- react-router - 使用 OWIN 托管 REACT spa 应用程序和 REST Web API