深圳网站建设 东莞网站建设,seo数据统计分析工具有哪些,wordpress 慢途网,免费创建网站 优帮云在前面Vue实战055：WEB页面锁屏功能实现详解中，我们有个点击锁屏图标弹出输入锁屏密码对话框的功能，这时候我们需要点击输入框然后输入我们的密码，所以现在在优化下，弹出对话框的时候自动获取输入框焦点，这样我们就可以直接输入密码锁屏了。 ?比较简单的方法就是通过watc… 
在前面Vue实战055：WEB页面锁屏功能实现详解中，我们有个点击锁屏图标弹出输入锁屏密码对话框的功能，这时候我们需要点击输入框然后输入我们的密码，所以现在在优化下，弹出对话框的时候自动获取输入框焦点，这样我们就可以直接输入密码锁屏了。
?比较简单的方法就是通过watch监听对话框属性，当对话框显示时box属性为true，这是我们通过refs属性来定位DOM元素并对元素进行focus操作，由于这里我们用的是Element组件，所以获取元素的时候需要注意实际操作的DOM元素在该元素的子元素中。
watch:{ box(){ if(this.box==true){ this.$refs.input.$refs.input.focus() } }},这时你会发现对应的元素，因为el-input本身是作为渲染元素来动态渲染的，而ref是作为渲染结果被创建的，在渲染初期该元素还不存在自然就无法访问到了。所以这里我们要利用$nextTick，$nextTick 是在 DOM 更新循环结束之后执行的延迟回调，在修改数据之后使用 $refs就可以获取更新后