vue-hotkey组件——v-hotkey：Vue 2.x指令，用于将热键绑定到组件 & v-hotkey=keymap和computed结合使用

vue-hotkey组件——v-hotkey：Vue 2.x指令，用于将热键绑定到组件 & v-hotkey="keymap"和computed结合使用

vue.js组件数据绑定

1、v热键 (v-hotkey)基本介绍

Vue 2.x directive for binding hotkeys to components.

Vue 2.x指令，用于将热键绑定到组件。

View demo查看演示——https://dafrok.github.io/v-hotkey/#/step/1

Download Source下载源——https://github.com/Dafrok/v-hotkey/archive/master.zip

2、使用

安装

$ npm i --save v-hotkey

用法

main.js

import Vue from 'vue'
import VueHotkey from 'v-hotkey'
 
Vue.use(VueHotkey)

页面

index.vue

<template>
  <span v-hotkey="keymap" v-show="show"> Press `ctrl + esc` to toggle me! Hold `enter` to hide me! </span>
</template>
 
<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle () {
      this.show = !this.show
    },
    show () {
      this.show = true
    },
    hide () {
      this.show = false
    }
  },
  computed: {
    keymap () {
      return {
        // 'esc+ctrl' is OK.
          //'a + s'  只按's'生效
        'ctrl+esc': this.toggle,
        'enter': {
          keydown: this.hide,
          keyup: this.show
        }
      }
    }
  }
}
</script>

3、实例

第一步：

npm i --save v-hotkey

第二步：

main.js

import VueHotkey from 'v-hotkey';
Vue.use(VueHotkey);

第三步：

index.vue

<span slot="footer" class="dialog-footer" v-hotkey="keyMap"></span>

<span class="dialog-footer-btn">
    <el-button icon="el-icon-arrow-left" :disabled="loading" @click="changeImg('a')">
        上一识别(A)
    </el-button>
    <el-button icon="el-icon-arrow-left" :disabled="loading" @click="changeImg('w')">
        上一张(W)
    </el-button>
    <el-button :disabled="loading" @click="changeImg('s')">
        下一张(S)<i class="el-icon-arrow-right el-icon--right"></i>
    </el-button>
    <el-button :disabled="loading" @click="changeImg('d')">
        下一识别(D)<i class="el-icon-arrow-right el-icon--right"></i>
    </el-button>
</span>

<script>
export default {
    data(){
        return:{
          loading: false,
          markData: null,
        }
    },
    methods:{
      /**
       * 切换照片
       * @param type {string} w/s/a/d 分别对应上一张、下一张、上一识别、下一识别
       */
      changeImg(type) {
        if (!this.loading) {
          switch (type) {
            //上一张
            case 'w':
              if (this.markData.i - 1 === 0) {
                this.$message.info('已经是第一张');
                return;
              }
              this.setMarkDataByWorS('w');
              break;
            //下一张
            case 's':
              if (this.markData.i === this.markData.total) {
                this.$message.info('已经是最后一张');
                return;
              }
              this.setMarkDataByWorS('s');
              break;
            // 上一识别
            case 'a':
              if (this.markData.i - 1 === 0) {
                this.$message.info('已经是第一张');
                return;
              }
              this.setMarkDataByWorS('a');
              break;
            //下一识别
            case 'd':
              if (this.markData.i === this.markData.total) {
                this.$message.info('已经是最后一张');
                return;
              }
              this.setMarkDataByWorS('d');
              break;
            default:
              break;
          }
        }
      },        
    },
    computed: {
        /**
       * 快捷键监听
       * @return {*}
       */
        keyMap() {
            return {
                'w': () => {
                    this.changeImg('w');
                    return false;
                },
                's': () => {
                    this.changeImg('s');
                    return false;
                },
                'a': () => {
                    this.changeImg('a');
                    return false;
                },
                'd': () => {
                    this.changeImg('d');
                    return false;
                }
            }
        }
    },
}
</script>