Question

我目前正在Element UI中尝试一个漂亮的ui VueJS框架。在将select元素放在下拉菜单中时遇到问题，因为当我在select元素内选择一个项目时，它也会同时关闭下拉菜单。

每当在选择元素中选择一个项目时，如何使下拉菜单停留？

这是示例演示。 fiddle https://jsfiddle.net/vy70ogbz/

Answer 1

您为什么不使用菜单来实现此目的。我发现它更灵活，您可以仅在单击菜单时使用menu-trigger =“ click”属性来切换菜单。像这样

 <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      menu-trigger="click"
      @select="handleSelect">

      <el-submenu
        class="sub-menu-more">
        <template slot="title">
          <b>Click to dropdown</b>
        </template>
        <el-menu-item
          index="1">
          <span >Team</span>
        </el-menu-item>
        <el-menu-item
          index="2">
          <span >Product</span>
        </el-menu-item>
        <el-menu-item
          index="3">
          <span >item</span>
        </el-menu-item>
        <el-menu-item
          index="4">
         <el-select v-model="value" placeholder="Select">
        <el-option
         :label="'test1'"
         :value="'test1'">
        </el-option>
        <el-option
         :label="'test1'"
         :value="'test1'">
        </el-option>
        <el-option
          :label="'test1'"
          :value="'test1'">
        </el-option>
      </el-select>
        </el-menu-item>
      </el-submenu>
   </el-menu>

see fiddle

Answer 2

我遇到了同样的问题，我通过小技巧解决了这个问题：当下拉菜单打开时，我将 disabled="true" 属性设置为触发按钮。

<el-button
    :disabled="dropdownIsOpen"
    slot="button"
>Open</el-button>

它有效是因为在源代码中我们有这种情况的条件 https://github.com/ElemeFE/element/blob/dev/packages/dropdown/src/dropdown.vue#L121

示例：click

Answer 3

您可以防止下拉菜单隐藏。

在模板中使用以下代码

<el-dropdown ref="dropdown" trigger="click">
  <span class="el-dropdown-link">
    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>Action 1</el-dropdown-item>
    <el-dropdown-item>Action 2</el-dropdown-item>
    <el-dropdown-item>Action 3</el-dropdown-item>
    <el-dropdown-item>
      <el-select v-model="selectData" @change="handleChange">
        <el-option value="1">Option 1</el-option>
        <el-option value="2">Option 2</el-option>
        <el-option value="3">Option 3</el-option>
      </el-select>
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

这在你的脚本中

new Vue({
  data: {
    selectData: null
  },
  methods: {
    handleChange() {
      this.$nextTick(() => {
        this.$refs.dropdown.show();       
      });
    }
  }
}).$mount('#app')

在下拉菜单问题中选择元素

3 个答案: