<div class="top">
<div class="container">
<a href="#" class="loge"></a>//loge图片
//导航栏内容
<div class="header-navs">
<ul class="navs">
<li v-for="item in navs" class="nav">
<template v-if="item.type">
<a href="javascript: void(0);" class="nav-item"
@mouseenter="evtHeaderEnter(item.type)" @mouseleave="evtHeaderLeave()">{{item.name}}</a>
</template>
<template v-else>
<a :href="item.sourceUrl" target="_blank" class="nav-item">{{item.name}}</a>
</template>
</li>
</ul>
</div>
//搜索框
<div class="header-search">
<ul class="hot-word" transition="fadeOut" v-show="hotStatus">
<li class="hot-item" v-for="item in hotItems">{{item}}</li>
</ul>
<input @focus="evtIptFocus" @blur="evtIptBlur" class="search-ipt" type="search" name="search" value="">
<label class="search-btn" for="search"><i class="icon-search"></i></label>
<ul class="search-result clearfix">
<li v-for="item in results">
<span class="item-name">{{item.name}}</span>
<span class="item-num">约有{{item.number}}件</span>
</li>
</ul>
</div>
</div>
//隐藏的导航栏的具体内容
<div class="header-menu" @mouseenter="evtHeaderEnter()" @mouseleave="evtHeaderLeave()" v-show="headerStatus" transition="fadein">
<ul class="menus clearfix">
<li class="product" v-for="item in currentPhones">
<a :href="item.sourcePath">
<img :src="item.imgUrl" alt="" class="product-img"/>
</a>
<div class="product-name">{{item.name}}</div>
<div class="product-price">{{item.price}}</div>
</li>
</ul>
</div>
</div>
//这里就主要写方法,数据自己随意添加
export default {
data (){
return {
hotStatus: true,
headerStatus: false,
tids: '',
currentPhones: this.xiaomi,
hotItems: ['红米pro', '小米笔记本air'],
}
methods: {
evtIptFocus () {
$('.header-search').addClass('search-active')
$('.search-result').show()
this.hotStatus = false
},
evtIptBlur () {
$('.header-search').removeClass('search-active')
$('.search-result').hide()
this.hotStatus = true
},
evtHeaderEnter (menuType) {
if (menuType) {
this.currentPhones = this[menuType]
}
this.headerStatus = true
clearTimeout(this.tids)
},
evtHeaderLeave () {
let self = this
this.tids = setTimeout(function () {
self.headerStatus = false
}, 300)
}
},
}
如果想看完整的项目请搜:https://github.com/wendaosanshou/mi-by-vue
网友评论