Vue.js 下拉嵌套菜单(当子项处于活动状态时保持父项处于打开状态) [英] Vue.js dropdown nested menu (keep parent open when child active)

查看：21
本文介绍了Vue.js 下拉嵌套菜单(当子项处于活动状态时保持父项处于打开状态)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我开始使用 Vue.js，但偶然发现了一些问题.我想创建一个带有下拉菜单的简单侧边栏，并且已经得到了:

new Vue({el: '#app',数据() {返回 {打开的项目:{}，选定的子: '',用户菜单:假，项目: [{图标:'./src/assets/img/icons/dashboard.svg',text: '元素 1',路径:'#1'},{图标:'./src/assets/img/icons/orders.svg',text: '元素 2',路径:'#2'},{图标:'./src/assets/img/icons/products.svg',文本:'嵌套元素'，小路: ''，孩子们: [{图标:'now-ui-icons files_paper'，文本:'嵌套 1'，路径:'/产品'},{图标:'now-ui-icons files_paper'，text: '嵌套 2',路径:'/类别'},{icon: 'now-ui-icons location_bookmark',text: '嵌套 3',路径:'/属性集'},{图标:'now-ui-icons files_box'，text: '嵌套 4',路径:'/变体组'},{图标:'now-ui-iconsshopping_box',text: '嵌套 5',路径:'/供应商'},{图标:'now-ui-icons business_chart-bar-32'，text: '嵌套 6',路径:'/增值税率'},],},{图标:'./src/assets/img/icons/clients.svg',text: '元素 4',路径:'#3'},{图标:'./src/assets/img/icons/marketing.svg',text: '元素 5',路径:'#4'},{图标:'./src/assets/img/icons/reports.svg',text: '元素 6',路径:'#5'},{图标:'./src/assets/img/icons/settings.svg',text: '元素 7',路径:'#6'},{图标:'./src/assets/img/icons/integrations.svg'，text: '元素 8',路径:'#7'},],}},方法: {折叠项目(索引，项目){如果(item.children ！= null){this.openedItems[index] = !this.openedItems[index]this.$forceUpdate()}}}})

body {背景色:#F6F7FB；font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}一个 {白颜色;文字装饰:无；}乌利{列表样式类型:无；}#侧边栏{背景:线性梯度(#2595ec，#64DD17)；顶部:0；左:0；宽度:275px；高度:1000px；位置:绝对；z-索引:-1；颜色:#FFFFFF；字体大小:14px；显示:网格；网格模板列:45px 155px 30px 45px；网格模板区域:.项目."；字体粗细:粗体；}.sidebar-items {填充顶部:100px；网格区域:项目；左边距:-40px；显示:弹性；弹性方向:列；}.物品 {显示:弹性；弹性方向:行；flex-wrap: nowrap;填充底部:10px；}#it​​em-icon {宽度:25px；高度:自动；过滤器:反转(100%)；填充顶部:9px；padding-right: 15px;网格区域:项目图标；向左飘浮;}.项目名称 {网格区域:项目名称；位置:静态；向左飘浮;}.child-items {填充顶部:50px；字体大小:12px；}.child-item {填充底部:15px；空白:nowrap}.slide-fade-enter-active {过渡:所有 .8s 都轻松；}.slide-fade-leave-active {过渡:所有 .3s 三次贝塞尔曲线(0.5、1.0、0.8、1.0)；}.slide-淡入淡出，.slide-fade-leave-to {变换:translateY(-10px);不透明度:0；}

<script src="https://unpkg.com/vue"></script><div id="应用程序"><div id="侧边栏"><ul class="sidebar-items"><li v-for="(item,index) in items" @click="collapseItem(index, item)" class="item"><路由器链接:to="item.path"><!-- <img :src="item.icon" id="item-icon">--><p class="item-name">{{item.text}}</p><transition name="slide-fade"><ul class="child-items" v-if="openedItems[index]"><li class="child-item" v-for="child in item.children"><路由器链接:to="child.path">{{child.text}}</路由器链接></路由器链接>

我的问题是，当我单击嵌套元素子级时，该元素会关闭，并且应该保持打开状态.任何想法我怎么能做到这一点?我很确定我必须改变我的方法，但此时我没有想到.

这里还有 jsfiddle:https://jsfiddle.net/myeh0mvo/14/

解决方案

您需要在嵌套元素上添加 @click.stop 以停止事件传播:

{{child.text}}</路由器链接>

这是更新的 JSFiddle:https://jsfiddle.net/myeh0mvo/23/

您可以在此文档页面上了解有关事件修饰符的更多信息:https://vuejs.org/v2/guide/events.html#Event-Modifiers

I'm starting my journey with Vue.js, and stumbled upon some problem. I wanted to create a simple sidebar with dropdown menu, and already got this: 

new Vue({
  el: '#app',
  data() {
    return {
      openedItems: {},
      selectedSub: '',
      userMenu: false,
      items: [{
          icon: './src/assets/img/icons/dashboard.svg',
          text: 'Element 1',
          path: '#1'
        },
        {
          icon: './src/assets/img/icons/orders.svg',
          text: 'Element 2',
          path: '#2'
        },
        {
          icon: './src/assets/img/icons/products.svg',
          text: 'NestedElement',
          path: '',
          children: [{
              icon: 'now-ui-icons files_paper',
              text: 'Nested 1 ',
              path: '/products'
            },
            {
              icon: 'now-ui-icons files_paper',
              text: 'Nested 2',
              path: '/categories'
            },
            {
              icon: 'now-ui-icons location_bookmark',
              text: 'Nested 3',
              path: '/attribute-sets'
            },
            {
              icon: 'now-ui-icons files_box',
              text: 'Nested 4',
              path: '/variant-groups'
            },
            {
              icon: 'now-ui-icons shopping_box',
              text: 'Nested 5',
              path: '/vendors'
            },
            {
              icon: 'now-ui-icons business_chart-bar-32',
              text: 'Nested 6',
              path: '/vat-rates'
            },
          ],
        },
        {
          icon: './src/assets/img/icons/clients.svg',
          text: 'Element 4',
          path: '#3'
        },
        {
          icon: './src/assets/img/icons/marketing.svg',
          text: 'Element 5',
          path: '#4'
        },
        {
          icon: './src/assets/img/icons/reports.svg',
          text: 'Element 6',
          path: '#5'
        },
        {
          icon: './src/assets/img/icons/settings.svg',
          text: 'Element 7',
          path: '#6'
        },
        {
          icon: './src/assets/img/icons/integrations.svg',
          text: 'Element 8',
          path: '#7'
        },

      ],
    }

  },

  methods: {
    collapseItem(index, item) {

      if (item.children != null) {
        this.openedItems[index] = !this.openedItems[index]
        this.$forceUpdate()
      }

    }
  }
})

body {
  background-color: #F6F7FB;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  color: white;
  text-decoration: none;
}

ul li {
  list-style-type: none;
}

#sidebar {
  background: linear-gradient(#2595ec, #64DD17);
  top: 0;
  left: 0;
  width: 275px;
  height: 1000px;
  position: absolute;
  z-index: -1;
  color: #FFFFFF;
  font-size: 14px;
  display: grid;
  grid-template-columns: 45px 155px 30px 45px;
  grid-template-areas: ". items . ";
  font-weight: bold;
}

.sidebar-items {
  padding-top: 100px;
  grid-area: items;
  margin-left: -40px;
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-bottom: 10px;
}

#item-icon {
  width: 25px;
  height: auto;
  filter: invert(100%);
  padding-top: 9px;
  padding-right: 15px;
  grid-area: item-icon;
  float: left;
}

.item-name {
  grid-area: item-name;
  position: static;
  float: left;
}

.child-items {
  padding-top: 50px;
  font-size: 12px;
}

.child-item {
  padding-bottom: 15px;
  white-space: nowrap
}

.slide-fade-enter-active {
  transition: all .8s ease;
}

.slide-fade-leave-active {
  transition: all .3s cubic-bezier(0.5, 1.0, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <div id="sidebar">
    <ul class="sidebar-items">
      <li v-for="(item,index) in items" @click="collapseItem(index, item)" class="item">
        <router-link :to="item.path">
          <!-- <img :src="item.icon" id="item-icon"> -->
          <p class="item-name">{{item.text}}</p>

          <transition name="slide-fade">
            <ul class="child-items" v-if="openedItems[index]">
              <li class="child-item" v-for="child in item.children">
                <router-link :to="child.path">
                  {{child.text}}
                </router-link>
              </li>
            </ul>
          </transition>
        </router-link>
      </li>
    </ul>
  </div>
</div>

My problem here is that when I click on a nested elements child, the element closes and it's supposed to stay open. Any ideas how I could achieve that? I'm pretty sure I would have to change my approach on this, but at this point nothing comes to my mind.

Here's jsfiddle also: https://jsfiddle.net/myeh0mvo/14/

解决方案

You need to add a @click.stop on your nested elements to stop the event propagation: 

<router-link :to="child.path" @click.stop>
   {{child.text}}
</router-link>

Here is the updated JSFiddle: https://jsfiddle.net/myeh0mvo/23/

You can learn more about event modifiers on this page of the documentation: https://vuejs.org/v2/guide/events.html#Event-Modifiers

这篇关于Vue.js 下拉嵌套菜单(当子项处于活动状态时保持父项处于打开状态)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆