src/components/fixed/header.vue

@@ -1,18 +1,19 @@
<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>
         <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 ref="mySearch" 
         v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
            <a-input @keydown.enter="onSelect">
         <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>
@@ -66,26 +67,36 @@
         return {
            search: {
               placeholder: "ctrl+shift+f/enter",
               allowClear: true,
               // 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
               },
            }
         }

@@ -101,12 +112,13 @@
            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("更多功能..敬请期待")
            this.$message.info("回车,内容为" + value)
         },
         onChange(value) {
            console.log('修改', value);
@@ -118,3 +130,17 @@
      },
   }
</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>