From 019990450fa60b31f3a055a4e1f3fc7609843291 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 17 Jan 2022 02:22:52 +0800 Subject: [PATCH] Aplayer/全局键盘监听 --- src/components/fixed/header.vue | 88 ++++++++++++++++++++++++++++++++------------ 1 files changed, 64 insertions(+), 24 deletions(-) diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue index fff0887..d235b19 100644 --- a/src/components/fixed/header.vue +++ b/src/components/fixed/header.vue @@ -1,36 +1,71 @@ <template> - <a-row type="flex" justify="start" > - <a-col v-bind="showSmall"> - <router-link to="/main1">Home »</router-link> - </a-col> - <a-col v-bind="showSmall"> - <router-link to="/main2">乐谱搜索 »</router-link> - </a-col> - <a-col v-bind="showSmall"> - <router-link to="/main3">我的网盘 »</router-link> - </a-col> - <a-col v-bind="showMain"> - <router-link to="/tagInfo">关于我 »</router-link> - </a-col> - <a-col v-bind="showMain"> - <a-auto-complete v-bind="search" @select="onSelect" @search="onSearch" @change="onChange"> - <a-input> - <a-icon slot="suffix" type="search" class="certain-category-icon" /> - </a-input> - </a-auto-complete> - </a-col> - - </a-row> + <a-row type="flex" justify="start"> + <a-col v-bind="showSmall"> + <router-link to="/main1">Home »</router-link> + </a-col> + <a-col v-bind="showSmall"> + <router-link to="/main2">乐谱搜索 »</router-link> + </a-col> + <a-col v-bind="showSmall"> + <router-link to="/main3">我的网盘 »</router-link> + </a-col> + <a-col v-bind="showMain"> + <a-auto-complete ref="mySearch" + v-bind="search" @select="onSelect" @search="onSearch" @change="onChange"> + <a-input @keydown.enter="onSelect"> + <a-icon slot="suffix" type="search" class="certain-category-icon" /> + </a-input> + </a-auto-complete> + </a-col> + + </a-row> </template> <script> export default { + mounted() { + let self = this; + let code = 0; + let code2 = 0; + let code3 = 0; + document.onkeydown = function(e) { + let evn = e || event; + let key = evn.keyCode || evn.which || evn.charCode; + if (key === 17) { + code = 1; + } + if (key === 16) { + code2 = 1; + } + if (key === 70) { + code3 = 1; + } + if (code === 1 && code2 === 1 && code3 === 1) { + self.$message.info("进入全局搜索..") + //do something + self.$refs.mySearch.focus(); + code = 0; + code2 = 0; + } + } + document.onkeyup = function(e) { + if (e.keyCode === 17) { + code = 0; + } + if (e.keyCode === 16) { + code2 = 0; + } + if (e.keyCode === 70) { + code3 = 0; + } + } + }, data() { return { search: { - placeholder: "全局搜索..", + placeholder: "ctrl+shift+f/enter", allowClear: true, // autoFocus: true, backfill: true, @@ -61,12 +96,17 @@ }, }, methods: { + test(e) { + console.log(333); + console.log(e); + }, onSearch(searchText) { this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)]; console.log("补全.."); }, onSelect(value) { console.log('回车', value); + this.$message.info("回车") }, onChange(value) { console.log('修改', value); @@ -77,4 +117,4 @@ }, }, } -</script> \ No newline at end of file +</script> -- Gitblit v1.9.1