美文网首页
用vue实现导航栏操作

用vue实现导航栏操作

作者: 陌紫嫣 | 来源:发表于2018-05-07 16:13 被阅读0次
    <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
    

    相关文章

      网友评论

          本文标题:用vue实现导航栏操作

          本文链接:https://www.haomeiwen.com/subject/ymcvrftx.html