自动获焦
sdk>=2.8
当需要一个元素请求焦点时,使用requestFocus
等主动
请求焦点的方法存在延迟等问题,体验不佳。 更好的方式是通过指定autofocus
属性,在一些时机
下底层会自动
的获取焦点。autofocus
不仅方便使用,而且提升焦点体验、推荐使用。
使用方法
- 在div、qt-view组件上指定
autofocus
属性,如
html
<div :autofocus="true"></div>
详情用法请查看es-auto-focus
- 在qt-list-view、qt-grid-view等
列表
型组件上使用autofocusPosition
属性,如
html
<!--list-view中position为5的元素展现时将自动获焦-->
<qt-list-view :autofocusPosition="5"></qt-list-view>
列表
自动获焦的具体用法,请参考列表中自动获焦
ul暂不支持
自动时机
不同组件会根据自身状态触发自动获焦,以下是一些触发时机:
元素初始化时
元素首次创建并展示出来时
html
<!--root-->
<div>
<div :autofocus="true">
<p>我进入页面后自动获焦</p>
</div>
</div>
使用v-if标签由不可见变为可见时
html
<div v-if="created">
<div :autofocus="true">
<!--支持嵌套的-->
<div>
<p>我会在created为true时自动获焦</p>
</div>
</div>
</div>
由不可见变为可见时
使用v-show或者visible属性由不可见变为可见时
html
<!--v-show时-->
<div :autofocus="true" v-show="visible">
<p>visible为true时我会获焦</p>
</div>
<!--visible时-->
<div :autofocus="true" :visible="visible">
<p>visible为true时我会获焦</p>
</div>
list-view等列表组件,重新设置数据时
list-view、grid-view等列表组件除了在可见性变化时会自动获焦, 在重新设置数据时,也会根据autofocusPosition
属性自动获焦;
vue
<qt-list-view :autofocusPosition="5" ref="list"></qt-list-view>
this.$refs.list.init(data);
<!--只要重新设置数据,position为5的子元素就会自动获焦-->
注意这里只是init方法为伪代码,重新设置数据方法请查看qt-list-view组件文档
取消自动获焦
将autofocus
设为false
即可
html
<div :autofocus="isAutofocus"></div>
js
isAutofocus = false;