A vue directive that can let you control your input and textarea auto focus very easily!
Vue
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