header.vue

<template>

    <navbar class="header" 

    :class="{'header-transition': isHeaderTransition}"

    v-show="visible"

    >

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

        <me-search-box slot="center" @click.native="goToSearch" fake></me-search-box>

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

    </navbar>

</template>

<script>

import Navbar from 'base/navbar'

import MeSearchBox from 'base/search-box'

export default {

    name: "HomeHeader",

    props: {

        isHeaderTransition: {

            type: Boolean,

            default: false

        }

    },

    data() {

        return {

            visible: true

        }

    },

    components: {

        Navbar,

        MeSearchBox

    },

    methods: {

        show() {

            this.visible = true

        },

        hide() {

            this.visible = false

        },

        goToSearch() {

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

        }

    }

}

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

    .header {

        &.mine-navbar {

            background-color: transparent;

            transition: background-color .6s;

        }

        .iconfont{

            color: $icon-color-default;

            font-size: $icon-font-size;

        }

        &.header-transition {

            background-color: $header-bgc-translucent;

        }

    }

</style>

base/search-box

<template>

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

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

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

        <input class="mine-search-box" 

        type="text" 

        :placeholder="placeholder"

        v-model="query"

        v-if="!fake"

        ref="input"

        name="" 

        id="">

        <i class="iconfont icon-close" v-show="query" @click="reset"></i>

    </div>

</template>

<script>

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

export default {

    name: 'MeSearchBox',

    props: {

        placeholder: {

            type: String,

            default: '请输入搜索内容'

        },

        fake: {

            type: Boolean,

            default: false

        }

    },

    data() {

        return {

            query: ''

        }

    },

    watch: {

        query: debounce(function(query) {

            console.log(query)

        })

    },

    methods: {

        focus() {

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

        },

        clear() {

            this.query = ''

        },

        reset() {

            this.clear()

            this.focus()

        }

    }

}

</script>

<style lang="scss">

@import '~assets/scss/mixins';

    $search-box-height: 30px;

    .mine-search-box-wrapper {

        display: flex;

        width: 86%;

        background-color: white;

        height: $search-box-height;

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

        align-items: center;

        padding: 0 7px;

        .mine-search-box {

            flex: 1;

            margin: 0 6px;

            color: #666;

            line-height: 1.5;

        }

        .iconfont {

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

            font-weight: bold;

            color: $icon-color;

        }

    }

</style>