使用vue-direction-key快速切換input的焦點(diǎn)focus，可應(yīng)用在財(cái)務(wù)表格上等等

功能介紹

vue方向鍵插件，適合鍵盤(pán)的快捷鍵操作，通過(guò)鍵盤(pán)在input間切換，應(yīng)用在后臺(tái)系統(tǒng)開(kāi)單，財(cái)務(wù)等等的快速輸入和保存上，使用簡(jiǎn)單，配置方便

使用方法

  • 安裝
    npm install --save vue-direction-key
  • 使用
    在入口文件中引用
import Direction from 'vue-direction-key'
Vue.use(Direction)

在模版文件中使用
template中

<el-input placeholder="請(qǐng)輸入內(nèi)容" v-direction="{x: 0, y: 0}"></el-input>
<input type="text" v-direction="{x: 1, y: 0}">

script中

created: function () {
  let direction = this.$getDirection()
  direction.on('keyup', function (e, val) {
    if (e.keyCode === 39) {
      direction.next()
    }
    if (e.keyCode === 37) {
      direction.previous()
    }
    if (e.keyCode === 38) {
      direction.previousLine()
    }
    if (e.keyCode === 40) {
      direction.nextLine()
    }
  })
}

說(shuō)明： x，y分別為x軸和y軸的坐標(biāo)，事件的綁定必須在mounted之前，可以放在created中或者beforeMounted中(在mounted中綁定由于組建的渲染順序可能會(huì)無(wú)效)

api

在vue組件鉤子中使用this.$getDirection()獲取direction對(duì)象，該對(duì)象有以下方法

  • direction.on(keys, fun)

    • 參數(shù)： keys： (string) 原生的事件參數(shù)如： 'keyup', 'keydown'等
      fun： 自定義函數(shù)，有兩個(gè)參數(shù)function(e, val),e為event對(duì)象，val為觸發(fā)的input綁定的自定義指令的值，可以通過(guò)此選項(xiàng)來(lái)傳值進(jìn)行特殊判斷，例如：

    template中

    <input type="text" v-direction="{x: 1, y: 0, type: 'name'}">

    script中

    direction.on('keyup', function (e, val) {
  if (val.type === 'name') {
    console.log(111)
  }
})
    • 作用： 給directive作用的原生input綁定事件，注意是綁定在原生的input上，例如：
    direction.on('keyup', function (e, val) {
 if (e.keyCode === 39) {
   direction.next()
 }
 if (e.keyCode === 37) {
   direction.previous()
 }
 if (e.keyCode === 38) {
   direction.previousLine()
 }
 if (e.keyCode === 40) {
   direction.nextLine()
 }
})

  • direction.next(x, y)

    • 參數(shù)： x,y軸的坐標(biāo)，例如(1, 1) <選填>，默認(rèn)為當(dāng)前focus的input坐標(biāo)
    • 作用： 光標(biāo)移動(dòng)到下一個(gè)input

  • direction.previous(x, y)

    • 參數(shù)： x,y軸的坐標(biāo)，例如(1, 1) <選填>，默認(rèn)為當(dāng)前focus的input坐標(biāo)
    • 作用： 光標(biāo)移動(dòng)到上一個(gè)input

  • direction.previousLine(x, y)

    • 參數(shù)： x,y軸的坐標(biāo)，例如(1, 1) <選填>，默認(rèn)為當(dāng)前focus的input坐標(biāo)
    • 作用： 光標(biāo)移動(dòng)到上一行的input

  • direction.nextLine(x, y)

    • 參數(shù)： x,y軸的坐標(biāo)，例如(1, 1) <選填>，默認(rèn)為當(dāng)前focus的input坐標(biāo)
    • 作用： 光標(biāo)移動(dòng)到下一行的input

  • direction.onEnd

    • 作用： 函數(shù)，光標(biāo)移動(dòng)到最后一個(gè)input出發(fā)的函數(shù)
      例如：
    direction.onEnd = function () {
  console.log(111)
}

在element表格中使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>vue-direction-key</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" >
  <!-- 引入組件庫(kù) -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入vue-direction-key -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-direction-key/direction.js"></script>
</head>

<body>
    <div id="app">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
          <template slot-scope="scope">
              <el-input v-model="scope.row.date" placeholder="請(qǐng)輸入內(nèi)容" v-direction="{x: 0, y: scope.$index}"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
          <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="請(qǐng)輸入內(nèi)容" v-direction="{x: 1, y: scope.$index}"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
          <template slot-scope="scope">
              <el-input v-model="scope.row.address" placeholder="請(qǐng)輸入內(nèi)容" v-direction="{x: 2, y: scope.$index}"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
</body>

<script type="text/javascript">
  Vue.use(Direction)
  var app = new Vue({
    el: '#app',
    data: {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }]
    },
    created: function () {
      let direction = this.$getDirection()
      direction.on('keyup', function (e, val) {
        console.log(val)
        if (e.keyCode == 39) {
          direction.next()
        }
        if (e.keyCode == 37) {
          direction.previous()
        }
        if (e.keyCode == 38) {
          direction.previousLine()
        }
        if (e.keyCode == 40) {
          direction.nextLine()
        }
      })
    }
  })
</script>
</html>

多個(gè)組件共存

如果一個(gè)組件里面有多個(gè)表格或控件，可以支持自定義指令的參數(shù)，例如

<input type="text" v-direction:a="{x: 0, y: 0}">
<input type="text" v-direction:a="{x: 1, y: 0}">
<input type="text" v-direction:b="{x: 0, y: 0}">
<input type="text" v-direction:b="{x: 1, y: 0}">

created: function () {
  let a = this.$getDirection('a')
  a.on('keyup', function (e, val) {
    if (e.keyCode === 39) {
      a.next()
    }
    if (e.keyCode === 37) {
      a.previous()
    }
    if (e.keyCode === 38) {
      a.previousLine()
    }
    if (e.keyCode === 40) {
      a.nextLine()
    }
  })


  let b = this.$getDirection('b')
  b.on('keyup', function (e, val) {
    if (e.keyCode === 39) {
      b.next()
    }
    if (e.keyCode === 37) {
      b.previous()
    }
    if (e.keyCode === 38) {
      b.previousLine()
    }
    if (e.keyCode === 40) {
      b.nextLine()
    }
  })
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容