vue仿美团侧边菜单组件

 这样一个组件的话我们是经常都能看到的，也经常都会用到，日常积累

首先从我们的布局开始，布局当然是越简单越好。我们是可以看到左边一个列表，固定不变的，右边是一个弹出菜单，菜单根据左边的每一栏获得不同的值，展示不同的内容，当然我这个gif图做得比较垃圾。大概明白这个意思就好

那么我看看这个布局怎么做

 

布局就这样两块儿就可以了，然后看下数据结构

data() {
      return {
　　　　　kind:'',

        menu: [{
          type: 'food',
          name: '美食',
          child:[{  // 这个child 就是我们右侧子类菜单需要展示的title和列表数据
            title:'美食',
            child:['代金券','葡萄干','火锅','快餐','小吃']
          }]
        }, {
          type: 'takeout',
          name: '外卖',
          child:[{
            title:'外卖',
            child:['干锅','快餐','中餐','小炒','汤品']
          }]
        }, {
          type: 'hotel',
          name: '酒店',
          child:[{
            title:'酒店星级',
            child:['经济型','舒适型','三星','四星','五星']
          }]
        }, {
          type: 'hotel',
          name: '酒店',
          child:[{
            title:'酒店星级',
            child:['经济型','舒适型','三星','四星','五星']
          }]
        }]
      }
    }

现在的话我们就可以去循环menu数据

 <dd  v-for='item in menu' :key='item.id'>    // 首先获取到小图标的type值  然后获取name
    class="item.type" />{{ item.name }} class="arrow" />
 

紧接着我们得循环右侧的菜单详情

<div class="detail" v-if='kind' @mouseenter='sover' @mouseleave='sout'>
   

现在需要做的就是遍历数组，这里使用了原生的filter方法过滤数组

computed: {
      curdetail:function(){
　　　　　　return this.menu.filter((item)=>item.type === this.kind)[0] // 利用filter过滤了item数组，拿到type并添加到kind，这样就拿到了侧边菜单的数据
　　　　}
    },

现在这个就成了，接下来需要实现鼠标移入移出了，首先鼠标离开的时候

我们先定义一个事件

methods: {
      mouseleave(){
　　　　let index = this;
　　　　index._timer=setTimout(()=>{
　　　　　　index.kind=''  鼠标离开的时候我们在200毫秒后清空kind，kind就是我们通过过滤获取到右侧菜单数据，这个方法是绑定到右侧导航栏上的
　　　　},200)
　　　　
　　　}}

上面我们过滤了数组，现在我们需要将过滤的数组使用了，判断鼠标移入的是哪个i

enter:function(e){ //鼠标移入 获取当前 i上面的type值 然后赋值给kind
        this.kind=e.target.querySelector('i').className   //这里使用了target.querySelector这个原生dom选择器   用来获取当前i的className,然后赋给当前的kind
    },

接下来还要处理下鼠标移入子级后，不能让子级菜单小时

sover:function(){
        clearTimeout(this._timer) // 清除定时器
      },

　sout:function(){  // 当鼠标离开的时候 清空kind值

　　　this.kind=''

　}

,这样一个侧边菜单组件完成，完整代码如下

 

转载于:https://www.cnblogs.com/yang656/p/10291314.html