用vue实现导航栏操作

   

    //loge图片
//导航栏内容
    

     

       

        
        
             
      
    
//搜索框
    

        

          
{{item}}
        
        
        
        

                   

             {{item.name}}
             约有{{item.number}}件
        
            
    

//隐藏的导航栏的具体内容

    

      

        
        
       
      
{{item.name}}
       
{{item.price}}
    
    



//这里就主要写方法，数据自己随意添加
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