src/components/fixed/header.vue

@@ -1,56 +1,102 @@
<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">
         <div class="menu">
            <router-link to="/">Home</router-link>
            <router-link to="/main2">乐谱搜索</router-link>
            <router-link to="/comment">碎碎念</router-link>
            <router-link to="/link">友人帐</router-link>
            <router-link to="/login">登录</router-link>
            <!-- <router-link to="/comment">测试页</router-link> -->
         </div>
      </a-col>
      <a-col v-bind="showMain">
         <a-auto-complete v-model="search.value" :data-source="search.dataSource" ref="mySearch" 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>

</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: "全局搜索..",
               allowClear: true,
               placeholder: "ctrl+shift+f/enter",
               // allowClear: true,
               // autoFocus: true,
               backfill: true,
               value: '',
               dataSource: [],
            },
            showSmall: {
               xs: 6,
               sm: 6,
               md: 6,
               lg: 6,
               xl: 6,
               xxl: 6,
               xs: 24,
               sm: 18,
               md: 18,
               lg: 18,
               xl: 18,
               xxl: 18,
            },
            showMain: {
               xs: 0,
               sm: 0,
               md: 2,
               lg: 2,
               xl: 2,
               xxl: 2,
               sm: 6,
               md: 6,
               lg: {
                  span: 3,
                  offset: 3
               },
               xl: {
                  span: 3,
                  offset: 3
               },
               xxl: {
                  span: 3,
                  offset: 3
               },
            }
         }

@@ -61,12 +107,18 @@
         },
      },
      methods: {
         test(e) {
            console.log(333);
            console.log(e);
         },
         onSearch(searchText) {
            this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
            this.search.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
            console.log("补全..");
         },
         onSelect(value) {
            console.log('回车', value);
            this.$message.info("更多功能..敬请期待")
            this.$message.info("回车,内容为" + value)
         },
         onChange(value) {
            console.log('修改', value);
@@ -77,4 +129,18 @@
         },
      },
   }
</script>
</script>
<style lang="less" scoped>
   .menu {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;

      a {
         margin-left: 10px;
      }

   }
</style>