用了Vue也一年多了,虽然对大部分内容都比较熟悉,但有些用法可能会起到意想不到的作用。

今天在做一个关于抽奖的需求,要求是每次点击编辑按钮显示编辑框,要求自动聚焦。

一开始想到了autofocus属性,结果发现每次只有刷新页面的第一次会生效,之后无论怎么点击都不能自动聚焦,于是网上查了很多资料,

最终问题指向了vue的指令,因此先回过头看看vue的指令部分。

vue指令

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:

当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

如果想注册局部指令,组件中也接受一个 directives 的选项:

directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

然后你可以在模板中任何元素上使用新的 v-focus 属性,如下:

<input v-focus>

好了,问题看似得到了解决。但在具体的项目中,我们在inserted中拿到的el可能不是input节点(比如直接使用了第三方组件库),这时就需要遍历el的childNode属性,获得我们

想要的input元素引用,从而调用focus方法。

至此,问题圆满解决。


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Vue的双向数据绑定知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。