vue.js组件数据绑定
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
安装
$ 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>
第一步:
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>