vue仿美团侧边菜单组件

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

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

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

<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave=‘mouseleave‘> //将方法绑定到父级
      <dt>全部分类</dt>
      <dd  > //这样我们就能根据当前的type去循环
        <i :class="item.type" />第一个<span class="arrow" />
      </dd>
    </dl>  // 上面这个就是我们看到的左侧的菜单列表
    <div>
      <template  > // 这里放右侧的子类列表
        <h4 >美食</h4>
        <span>烧烤</span>
      </template>
    </div>
  </div>
</template>

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

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
    <i :class="item.type" />{{ item.name }} <span class="arrow" />
 </dd>

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

<div class="detail" v-if=‘kind‘ @mouseenter=‘sover‘ @mouseleave=‘sout‘>
   <template v-for="(item,index) in curdetail.child">   //curdetail 是我们遍历鼠标移入的是哪个左侧的item,然后添加
      <h4 :key="index">{{ item.title }}</h4>
      <span
         v-for="list in item.child"
         :key="list.id">{{ list }}</span>
   </template>
</div>

现在需要做的就是遍历数组,这里使用了原生的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=‘‘

 }

 

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

<template>
  <div class="m-menu">
    <dl
      class="nav"
      @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd
        v-for="item in menu"
        :key="item.id"
        @mouseenter="enter"
      >
        <i :class="item.type" />{{ item.name }} <span class="arrow" />
      </dd>
    </dl>
    <div
      v-if="kind"
      class="detail"
      @mouseenter="sover"
      @mouseleave="sout"

    >
      <template v-for="(item,index) in curdetail.child">
        <h4 :key="index">{{ item.title }}</h4>
        <span
          v-for="list in item.child"
          :key="list.id">{{ list }}</span>
      </template>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        kind:‘‘,  //鼠标移入类型
        menu: [{
          type: ‘food‘,
          name: ‘美食‘,
          child:[{
            title:‘美食‘,
            child:[‘代金券‘,‘葡萄干‘,‘火锅‘,‘快餐‘,‘小吃‘]
          }]
        }, {
          type: ‘takeout‘,
          name: ‘外卖‘,
          child:[{
            title:‘外卖‘,
            child:[‘干锅‘,‘快餐‘,‘中餐‘,‘小炒‘,‘汤品‘]
          }]
        }, {
          type: ‘hotel‘,
          name: ‘酒店‘,
          child:[{
            title:‘酒店星级‘,
            child:[‘经济型‘,‘舒适型‘,‘三星‘,‘四星‘,‘五星‘]
          }]
        }, {
          type: ‘hotel‘,
          name: ‘酒店‘,
          child:[{
            title:‘酒店星级‘,
            child:[‘经济型‘,‘舒适型‘,‘三星‘,‘四星‘,‘五星‘]
          }]
        }]
      }
    },
    computed: {
      curdetail:function(){ //判断当前数据 并遍历
          return this.menu.filter((item)=>item.type === this.kind)[0]
          // 用 filer过滤item数组,并拿到type 然后添加到kind
      }
    },
    methods: {
      mouseleave:function(){ //鼠标离开的时候
        let self = this;
        self._timer = setTimeout(() => {
          self.kind = ‘‘
        }, 150);
      },
      enter:function(e){ //鼠标移入 获取当前 i上面的type值 然后赋值给kind
        this.kind=e.target.querySelector(‘i‘).className
      },
      // 鼠标移入子级
      sover:function(){
        clearTimeout(this._timer)
      },
      sout:function(){
        this.kind=‘‘
      }
    }
  }

</script>

<style scoped lang="scss">
  @import "@/assets/css/index/index.scss";
</style>

原文地址:https://www.cnblogs.com/yang656/p/10291314.html

时间: 2024-11-03 21:08:12

vue仿美团侧边菜单组件的相关文章

仿美团二级菜单

最近要做一个仿美团似的二级菜单 在csdn上找了demo 下载下来有错误不能运行   自己又整理了一下  终于可以运行实现效果了.布局xml就不贴出代码了,demo可以去csdn去下载:(后续补上链接) 1)分析思路,最外围的是一个Activity,顶部包含了一个View的容器,这个容器主要是装载ToggleButton来实现诸如美团里面的“美食,全城,理我最近,刷选”这一行.这一行一点就会弹出对应的下来菜单. 2)下拉菜单是如何实现的呢?,这里我们利用了PopupWindow来实现这一弹出式窗

Android开发:仿美团下拉列表菜单,帮助类,复用简单

最近在项目中需要用到下拉菜单,公司比较推崇美团的下拉菜单,于是要实现该功能,想着,这个功能应该是一个经常会用到的,于是何不写一个帮助类,只要往这个类里面传入特定的参数,既可以实现下来菜单,而且还可以实现菜单选择的回调,既可以重复使用,有简单便捷 首先,查看界面效果图 界面倒是比较简单,主要列下功能: 这个是靠一个帮助类实现的,下次想在自己的项目中实现该功能,一句引用代码,传入特定的参数既可以实现该功能 菜单弹出的时候,背景变灰色,菜单收回,背景回复白色 自动给选定的选项添加背景色,如果下次选择的

CSS JavaScript仿天猫侧边网页菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

MDNavBarView下拉导航菜单(仿美团导航下拉菜单)

说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下,感觉挺不错的,复用性也比较好,但要 是换成别的样式就要去修改代码了,感觉这有点不方便也比较容易出错.于是参照他的大致思路写了一个仿下拉菜单. 具体的实现就不多说了,觉得有意思的话可以下来看看.下面说一下使用方法吧: 1.添加navbarview包下的代码与对应资源 2.布局文件中添加: <com.m

vue2-org-tree 基于VUE的部门组织架构组件,增删节点实现

本文所用组件传送门:vue-org-tree 本文基于antd (其他前端组件框架操作基本都类似的: iview,elementui,boostrap-vue...) 当然,github上还有其他类似的组件,实现方法各有不同,显示效果也有差异,但都是很方便的组件. 看到网上有很多相关的使用教程,github上也写得很清楚,这里恕不在重复,本文主要实现增删节点. 场景:我们通常展示部门树的时候,简单的直接就是一个下拉框展示,为了显示明显,可能会使用一些树.    图片截至:(antd vue文档)

vue+elementUI 做的递归组件

废话少说,直接上最新鲜的干货 当然,你得提前安装好bootstrap,router,element-ui,vue-axios 1.上递归组件,此处参考了某位大神的代码,具体不知道是谁,因为到处都有人用 <template> <div> <template v-for='menu in menuList'> <!-- 如果当前有子菜单,则显示 el-submenu ,在el-subment 里调用 递归组件 --> <el-submenu v-if='m

第二百零八节,jQuery EasyUI,SplitButton(分割按钮菜单)组件

jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用方法,这个组件依赖 于 Menu(菜单)组件和 LinkButton(按钮)组件. 注意:SplitButton(分割按钮)组件与,MenuButton(菜单按钮)是一样的,不同是(分割按钮)组件多了一个分隔符 一加载方式 class 加载方式 <a href="javascript:void

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa