------------home-header

<template>

        <me-navbar class="header" title="" v-show="visible">

            <i class="iconfont icon-scan" slot="left"></i>

            <me-search-box

            placeholder="开学季有礼，好货5折起"

      slot="center"

      fake

      @query="getQuery"

      @click.native="goToSearch"

            ></me-search-box>

            <!-- 自定义组件的点击事件要加上click.native -->

            <i class="iconfont icon-msg" slot="right"></i>

        </me-navbar>

</template>

<script>

import MeNavbar from 'base/navbar';

import MeSearchBox from 'base/search-box';

export default {

    name: 'HomeHeader',

    components: {

        'me-navbar': MeNavbar,

         'me-search-box': MeSearchBox

    },

    data(){

      return{

        visible: true//自己控制自己的显示和隐藏，所以不用外面来传入变量

      }

    },

    methods: {

      show(){

          this.visible = true;

      },

      hide(){

          this.visible = false;

      },

      getQuery(query){//通过监听search输入框的内容query,通过这个内容从夫区其获取相应的数据

      },

      goToSearch(){

        this.$router.push('/');//将地址push进来，保存历史记录

      }

    },

    //  goToSearch() {

    //     this.$router.push('/search');

    //   }

}

</script>

<style lang="scss" scoped>

  @import "~assets/scss/mixins";

  .header {

    &.mine-navbar {

      /*background-color: $header-bgc-translucent; */

      background-color: transparent;

      transition: background-color 0.5s;

    }

    &.header-transition {

      background-color: $header-bgc-translucent;

    }

    .iconfont {

      color:$icon-color-default;

      font-size: $icon-font-size;

    }

  }

</style>

-------------base-search-index

<template>

  <div class="mine-search-box-wrapper">

    <i class="iconfont icon-search"></i>

    <!-- 获取焦点后会出现另外一个专门的搜索页面，而不是直接在header页面上出现输入法的搜索页面，传入fake就显示这个真正的搜索页面-->

    <div class="mine-search-box" v-if="fake">{{placeholder}}</div>

    <!-- 下面的input是header页面的搜索框没有真正搜索的功能，点击之后进入真正的搜索框 -->

    <input

      class="mine-search-box"

      type="text"

      title="搜索框"

      :placeholder="placeholder"

      ref="input"

      v-model="query"

      v-if="!fake"

    >

    <i

      class="iconfont icon-close"

      v-show="query"

      @click="reset"

    ></i>

  </div>

</template>

<script>

import {debounce} from 'assets/js/util';

export default {

    name: 'MeSearchBox',

    props:{

        placeholder:{

            type: String,

            default: '请输入搜索内容'

        },

        fake: {

            type: Boolean,

            default: false

        }

    },

    data() {

        return {

            query: ''

        }

    },

    watch: {

        query: debounce(function (){//因为每次输入,query页会发送改变，监听query就行

        this.$emit('query', this.query);//向外发送query，外面想知道就需要在该页面监听

    }),

    },

    methods: {

      focus() {

        this.$refs.input && this.$refs.input.focus();

      },

      clear() {

        this.query = '';

      },

      reset() {

        this.clear();

        this.focus();

      }

    }

  };

</script>

<style lang="scss" scoped>

  @import "~assets/scss/mixins";

  $search-box-height: 30px;

  .mine-search-box-wrapper {

    display: flex;

    align-items: center;

    width: 100%;

    height: $search-box-height;

    padding: 0 7px;

    background-color: #fff;

    border-radius: $search-box-height / 2;

  }

  .iconfont {

    color: $icon-color;

    font-size: $icon-font-size-sm;

    font-weight: bold;

  }

  .mine-search-box {

    flex: 1;

    background: none;

    border: none;

    margin: 0 6px;

    color: #666;

    line-height: 1.5;

  }

</style>