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

2024-06-04 14:23:47

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>

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

vue 使用lib-flexable，px2rem 进行移动端适配但是引入的第三方UI组件 vux 的样式缩小，解决方案...
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...
组件用.vue还是.js_如何使用Vue.js 2.0构建灵活的图像上传器组件
组件用.vue还是.js by Cathy Ha 由凯茜·哈(Cathy Ha) 如何使用Vue.js 2.0构建灵活的图像上传器组件 (How to build a flexible image u ...
picker插件 vue 移动端_基于 vue 的 picker 组件 vue-awesome-picker
⚠️ DEPRECATED 本组件停止维护 ⚠️Vue 组件库请移步 Vant ⚠️有赞前端大量坑位,内推私信 vue-awesome-picker Features 支持单列.多列和联级数据内置时 ...
踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／前端知识
文章目录使用意义基础使用给组件添加属性传递事件自定义组件的v-model 剖析v-model原理使用示例插槽使用意义有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
实例化vue对象绑定子组件_Vue-双向数据绑定
实例 Vue.js应用的创建很简单,通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue: var app = new Vue({//选项 }); 变量 app 就代表了这个 Vue ...
vue知识总结第一篇vue组件的定义以及父子组件的传值。
vue中是一个.vue结尾的vue文件其中包括<template>标签里边写html,而react是在render函数中..script用来写js,style中用来写css.那么我们来看看 ...
动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...

最新文章

热门文章