vue-input-focus-move v1.2.0

Vue-input-focus-move

功能介绍

基于 vue 开发，多个 input 可以通过键盘方向键，控制光标 input 焦点的切换。Tips:目前版本仅适用于左右方向键。

使用方法

• 安装

  npm install --save vue-input-focus-move

• 使用

在 main.js 文件中引用

import FocusMove from 'vue-input-focus-move'
Vue.use(FocusMove)

在模板文件中使用，在所有 input 控件的父级加 v-focus-move 即可，以下用 ElementUI 为例

<el-table v-focus-move :data="list">
  <el-table-column label="名字" prop="name">
    <template slot-scope="scope">
      <el-input v-model.trim="scope.row.name" />
    </template>
  </el-table-column>
  <el-table-column label="年龄" prop="age">
    <template slot-scope="scope">
      <el-input-number v-model="scope.row.age" :controls="false" :min="1" />
    </template>
  </el-table-column>
</el-table>

script 中使用

mounted() {
  this.$nextTick(()=>{
    this.$focusMove.init(this)
  })
} 

Tips：

• 本插件是直接遍历添加 v-focus-move 标签元素下 type=text 的所有 input 元素，然后添加相应的操作方法及事件
• $focusMove 是插件内封装的 Vue 全局变量
• init 方法只需要传入 Vue 实例对象即可，无需其他参数
• script 中使用的时候要加在 mounted 钩子内，且要在 $nextTick 内使用，否则会报元素未找到的错误

示例：

template ：

<el-table v-focus-move :data="list" border>
  <el-table-column label="名字" prop="name">
    <template slot-scope="scope">
      <template v-if="scope.$index !== 0">
        <el-input v-model="scope.row.name" />
      </template>
      <template v-else>
        <el-radio>123</el-radio>
      </template>
    </template>
  </el-table-column>
  <el-table-column label="年龄" prop="age">
    <template slot-scope="scope">
      <el-input-number v-model="scope.row.age" :disabled="scope.$index === 1" :controls="false" :min="1" />
    </template>
  </el-table-column>
  <el-table-column label="性别" prop="sex">
    <template slot-scope="scope">
      <template v-if="scope.$index !== 1">
        <el-input v-model="scope.row.sex" />
      </template>
      <template v-else>test</template>
    </template>
  </el-table-column>
  <el-table-column label="备注" prop="remark">
    <template slot-scope="scope">
      <el-input v-model="scope.row.remark" />
    </template>
  </el-table-column>
</el-table>

javascript ：

export default {
  data() {
    return {
      list: [{
        id: 1,
        name: '',
        age: undefined,
        sex: '',
        remark: ''
      }, {
        id: 2,
        name: '',
        age: 123333,
        sex: '',
        remark: ''
      }, {
        id: 3,
        name: '1233223',
        age: 12345,
        sex: '',
        remark: ''
      }, {
        id: 4,
        name: '',
        age: undefined,
        sex: '',
        remark: ''
      }]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$focusMove.init(this)
    })
  }
}