Vue 回顾之指令(关于input自动聚焦的问题)
用了Vue也一年多了,虽然对大部分内容都比较熟悉,但有些用法可能会起到意想不到的作用。
今天在做一个关于抽奖的需求,要求是每次点击编辑按钮显示编辑框,要求自动聚焦。
一开始想到了autofocus属性,结果发现每次只有刷新页面的第一次会生效,之后无论怎么点击都不能自动聚焦,于是网上查了很多资料,
最终问题指向了vue的指令,因此先回过头看看vue的指令部分。
除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:
当页面加载时,该元素将获得焦点 (注意:autofocus
在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:
// 注册一个全局自定义指令 `v-focus`
|
如果想注册局部指令,组件中也接受一个 directives
的选项:
directives: {
|
然后你可以在模板中任何元素上使用新的 v-focus
属性,如下:
<input v-focus>
|
好了,问题看似得到了解决。但在具体的项目中,我们在inserted中拿到的el可能不是input节点(比如直接使用了第三方组件库),这时就需要遍历el的childNode属性,获得我们
想要的input元素引用,从而调用focus方法。
至此,问题圆满解决。
喜欢这篇文章?欢迎打赏~~