简介

v-focus-next是一个Vue指令，应用该指令后，在表单的某个元素中输出回车符，能够主动聚焦到下一个表单元素，防止了用户通过鼠标来回选中表单元素，大大晋升了表单填写的效率和用户体验。

《演示成果》

v-focus-next的应用非常简单。

只须要为某个Dom或Vue组件（如div、form、ElForm等）绑定v-focus-next指令，则该Dom下的所有input/textarea主动反对回车聚焦性能，无需任何其余配置。

反对以下个性：

  • 默认会将所有input/textarea退出回车聚焦性能，也可通过指定className等形式，将局部表单元素反对回车聚焦。
  • 反对首个表单元素主动聚焦
  • 反对任意一般Dom元素和Vue组件
  • 主动过滤掉disable的元素及type为hidden、radio、checkbox、file、submit、reset的元素
  • 反对vue2/3

应用

装置

npm install v-focus-next

我的项目中引入

通过use形式，引入该指令中间件。

Vue3示例：

import { createApp } from 'vue'import App from './App.vue'import vFocusNext from "v-focus-next";let app = createApp(App)app.use(vFocusNext)  //通过中间件形式引入指令app.mount('#app')

Vue2示例：

import Vue from 'vue'import App from './App.vue'import vFocusNext from "v-focus-next";Vue.use(vFocusNext); //通过中间件形式引入指令new Vue({  render: h => h(App),}).$mount('#app')

示例1

只需为某个父元素减少v-focus-next指令，则其中所有表单元素就领有了回车聚焦性能。

 <div v-focus-next>    <input placeholder="输出回车主动聚焦下一行"/>    <input/>    <input/>    <input/>    <input/>    <textarea  /></div>

Vue组件也是一样的，如为el-form增加v-focus-next指令。

<el-form v-focus-next >    <el-form-item label="名称">        <el-input v-model="form.name" id="name" />    </el-form-item>    <el-form-item label="年龄">        <el-input v-model="form.age" id="age" disabled />    </el-form-item> </el-form>

示例2：指定参加回车聚焦的元素

或者你不想所有表单元素都参加回车聚焦，比方只想让所有设置了class为'test'的元素参加回车聚焦，只须要设置 v-focus-next="'.test'"，可设为querySelectorAll反对的参数模式。

<div v-focus-next="'.test'">    <input class="test"/>    <input />    <input class="test"/></div>

示例3：主动聚焦首个元素

只需设置v-focus-next.autoFocus即可。

<div v-focus-next.autoFocus>    <input />  //主动聚焦    <input />    <input /></div>

欢送试用点赞

欢送大家用到本人的我的项目中，让表单一路Next。
源码： https://github.com/501351981/v-focus-next