
<template>
  <header class="page-header">
    <div class="header-container">
      <router-link :to="{name: 'guide'}">
      <i class="icon-logo"></i>
      </router-link>
      <div class="header-search">
        <y-input v-model="searchValue" placeholder="搜索组件" @enter="searchCom()"></y-input>
      </div>
      <!--<router-link :to="{name: 'guide'}">组件</router-link>-->
    </div>
  </header>
</template>

<script>
  import axios from 'axios'
  import { Message } from '../../packages/message'
  import searchData from '../searchData.json'

  export default {
    data () {
      return {
        searchValue:'',
        searchList:searchData
      }
    },
    methods:{
      searchCom(){
        var that = this;
        var router = that.searchList[that.searchValue];
        if(router){
          that.$router.push({//你需要接受路由的参数再跳转
            path: router
          });
        }else{
          alert('error');
        }

      }
    }
  }
</script>

<style type="text/less" lang="less">
  @import "../assets/less/index";
  .page-header {
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 10px 0px rgba(231,233,237,1);
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    transition: all .3s;
    z-index: 10000;
    .header-container{
      margin: 0 auto;
      margin:0 25px;
      display: flex;
      align-items: center;
      height: 50px;
      justify-content: space-between;
      i{
        font-size:26px;
        color:#3C99FC;
      }
    }
    .header-search{
      width:166px;
      height: 30px;
      float: right;

    }
  }
</style>
