A vue directive that can let you control your input and textarea auto focus very easily!
Vue指令,你可以很方便地对页面中所有input和textarea的自动聚焦行为进行流程控制
npm install vue-auto-focus
import AutoFocus from 'vue-auto-focus'
Vue.use(AutoFocus)
- 指令必需用在需要控制的input和textarea元素父节点上
- 需要指令控制自动聚焦的input和textarea元素必需设置data-index属性
看使用说明时,请参对例子
- data-current 指令挂载的父元素的属性,为当前聚焦的元素的data-index属性的值
- data-action 执行指令时的自动聚焦行为,值为next时,自动聚焦到下一个元素,prev时,聚焦到上一个元素,first时聚焦到第一个元素,last时聚焦到最后一个元素,jump时,跳转到指令的元素
- v-auto-focus="focusCtrl" 指令值,指令值变化时,执行data-action指定的行为
- 自动聚焦后,需要监听@focus,更新data-current的值,否则下一次指令执行时,不会得到预期的行为
<template>
<form v-auto-focus="focusCtrl" :data-current="currentIndex" :data-action="actionType">
<input @focus="setFocusIndex(0)" type="text" data-index="0">
<input @focus="setFocusIndex(1)" type="text" data-index="1">
<textarea @focus="setFocusIndex(2)" name="" id="" cols="30" rows="10" data-index="2"></textarea>
<input @focus="setFocusIndex(3)" type="text" data-index="3">
</form>
</template>
<style rel="stylesheet/less" lang="less" scoped>
</style>
<script type="text/babel">
export default {
data() {
return {
focusCtrl: 0, // 自动聚焦控制,变动时,执行自动聚焦指令
currentIndex: 0, // 当前聚焦元素的索引
actionType: 'next', // 自动聚焦的行为类型
}
},
methods: {
/**
* 控制自动聚焦指令执行
* @param actionType {string} 自动聚焦类型 it can be 'next'/'prev'/'first'/'last'/'jump'
* @param index {string} 当actionType为'jump'时,需要传入将要聚焦元素的索引
**/
setFocus(actionType,index) {
if (actionType === 'jump') {
this.currentIndex = index
}
this.focusCtrl++
this.actionType = actionType
},
/**
* 元素聚焦时,获取当前聚焦元素的索引
* @param index {number} 当前聚焦的索引
**/
setFocusIndex(index) {
this.currentIndex = index
},
}
}
</script>
npm run dev
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent