src/components/fixed/header.vue

@@ -1,36 +1,73 @@
<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="showSmall">
         <router-link to="/main4">友人帐 »</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,
@@ -38,11 +75,11 @@
            },
            showSmall: {
               xs: 6,
               sm: 6,
               md: 6,
               lg: 6,
               xl: 6,
               xxl: 6,
               sm: 4,
               md: 4,
               lg: 4,
               xl: 4,
               xxl: 4,
            },
            showMain: {
               xs: 0,
@@ -61,12 +98,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 +119,4 @@
         },
      },
   }
</script>
</script>