Question

我正在尝试实现一个菜单，其下拉列表中显示子菜单。

菜单由标题，菜单元素和页脚组成。为此，我在我的父元素上使用了一个简单的display: flex，标题和页脚有两个固定大小，其余为flex: 1的内容。

为了管理内容中的滚动，我还必须在内容容器上设置overflow: auto。这会导致下拉菜单显示在X轴上滚动。

我不确定如何解决这个问题，我已尝试使用position: fixed，as mentioned in this question，但当我没有时，它不会起作用尝试滚动。

Here JSFiddle尝试使用固定位置失败。

当前的HTML模板：

<div id="app">
  <div class="menu">
    <div class="menu-header">
      <h1>
        Header
      </h1>
    </div>
    <div class="menu-content">
      <ul>
        <li class="element" v-for="(element, index) in elements" :key="index" 
          @mouseenter="element.childrenVisible = true"
          @mouseleave="element.childrenVisible = false">
          <h2>
            {{ element.title }}
          </h2>
          <div class="children-wrapper" v-if="element.childrenVisible && element.children && element.children.length">
            <ul class="children">
              <li v-for="(child, childIndex) in element.children" :key="childIndex">
                <h3>
                  {{ child.title }}
                </h3>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="menu-footer">
      <p>
        Footer..
      </p>
    </div>
  </div>
</div>

JS只包含一个Vue实例和一些测试数据，格式如下：

{
  title: '1',
  childrenVisible: false,
  children: [{
    title: '1.1',
  }],
},

CSS（sass）看起来像这样：

.menu {
  width: 100px;
  max-height: 500px;
  background-color: #0a6e89;
  display: flex;
  flex-direction: column;

  .menu-header, .menu-footer {
    height: 70px;
    flex-shrink: 0;
    background-color: #f9f8f2;
  }

  .menu-content {
    flex: 1;
    overflow: auto;
  }
}

.menu-content {  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .element {
    position: relative;

    .children-wrapper {
      position: absolute;  
      top: 0;
      left: 100%;
    }

    .children {
      position: fixed;
      background-color: #f9f8f2;
      border: 1px solid black;
    } 
  }
}

Answer 1

如果在@mouseenter中使用方法而不是直接切换childrenVisible标志，则会将一个事件传递给方法的参数。

这有屏幕坐标和对父元素的引用，它是子元素。

@mouseenter="mouseEnter"

methods: {
  mouseEnter (event) {
    // adjust child position here
  }
}

可滚动元素

1 个答案: