Dropdown 下拉菜单

一、概述

定义

向下弹出的操作或菜单的浮层。

使用场景

  • 将操作或菜单折叠到下拉菜单中。

  • 需要进一步进行操作时

类型

  • 基础样式

  • 分类样式

二、 基础样式

鼠标移动到下拉按钮上，展开下拉菜单。

Dropdown 下拉菜单 - 图1

  1. <template>
  2.   <se-dropdown>
  3.     <div class="se-dropdown-link">
  4.       hover me
  5.       <i class="se-dropdown-icon--down">
  6.         <svg
  7.           viewBox="64 64 896 896"
  8.           focusable="false"
  9.           class=""
  10.           data-icon="down"
  11.           width="1em"
  12.           height="1em"
  13.           fill="currentColor"
  14.           aria-hidden="true"
  15.         >
  16.           <path
  17.             d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
  18.           ></path>
  19.         </svg>
  20.       </i>
  21.     </div>
  22.     <se-dropdown-menu slot="menu">
  23.       <se-dropdown-item v-for="item in 5" :key="item">
  24.         {{item}}st menu item
  25.       </se-dropdown-item>
  26.     </se-dropdown-menu>
  27.   </se-dropdown>
  28. </template>
  30. <style>
  31.   .se-dropdown-link {
  32.     color: #01d567;
  33.     outline: none;
  34.     cursor: pointer;
  35.   }
  36.   .se-dropdown-icon--down {
  37.     display: inline-block;
  38.     font-size: 12px;
  39.     vertical-align: -0.2em;
  40.   }
  41. </style>

三、 分组

可以通过添加分割线进行分组。

Dropdown 下拉菜单 - 图2

  1. <template>
  2.   <se-dropdown>
  3.     <div class="se-dropdown-link">
  4.       hover me
  5.       <i class="se-dropdown-icon--down">
  6.         <svg
  7.           viewBox="64 64 896 896"
  8.           focusable="false"
  9.           class=""
  10.           data-icon="down"
  11.           width="1em"
  12.           height="1em"
  13.           fill="currentColor"
  14.           aria-hidden="true"
  15.         >
  16.           <path
  17.             d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
  18.           ></path>
  19.         </svg>
  20.       </i>
  21.     </div>
  22.     <se-dropdown-menu slot="menu">
  23.       <se-dropdown-item v-for="item in 5" :key="item" :divided="item === 3">
  24.         {{item}}st menu item
  25.       </se-dropdown-item>
  26.     </se-dropdown-menu>
  27.   </se-dropdown>
  28. </template>
  30. <style>
  31.   .se-dropdown-link {
  32.     color: #01d567;
  33.     outline: none;
  34.     cursor: pointer;
  35.   }
  36.   .se-dropdown-icon--down {
  37.     display: inline-block;
  38.     font-size: 12px;
  39.     vertical-align: -0.2em;
  40.   }
  41. </style>

四、 触发方式

可以配置 click | hover 激活。

Dropdown 下拉菜单 - 图3

  1. <template>
  2.   <se-dropdown>
  3.     <div class="se-dropdown-link">
  4.       hover me
  5.       <i class="se-dropdown-icon--down">
  6.         <svg
  7.           viewBox="64 64 896 896"
  8.           focusable="false"
  9.           class=""
  10.           data-icon="down"
  11.           width="1em"
  12.           height="1em"
  13.           fill="currentColor"
  14.           aria-hidden="true"
  15.         >
  16.           <path
  17.             d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
  18.           ></path>
  19.         </svg>
  20.       </i>
  21.     </div>
  22.     <se-dropdown-menu slot="menu">
  23.       <se-dropdown-item v-for="item in 5" :key="item">
  24.         {{item}}st menu item
  25.       </se-dropdown-item>
  26.     </se-dropdown-menu>
  27.   </se-dropdown>
  29.   <se-dropdown trigger="click">
  30.     <div class="se-dropdown-link">
  31.       click me
  32.       <i class="se-dropdown-icon--down">
  33.         <svg
  34.           viewBox="64 64 896 896"
  35.           focusable="false"
  36.           class=""
  37.           data-icon="down"
  38.           width="1em"
  39.           height="1em"
  40.           fill="currentColor"
  41.           aria-hidden="true"
  42.         >
  43.           <path
  44.             d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
  45.           ></path>
  46.         </svg>
  47.       </i>
  48.     </div>
  49.     <se-dropdown-menu slot="menu">
  50.       <se-dropdown-item v-for="item in 5" :key="item">
  51.         {{item}}st menu item
  52.       </se-dropdown-item>
  53.     </se-dropdown-menu>
  54.   </se-dropdown>
  55. </template>
  57. <style>
  58.   .se-dropdown-link {
  59.     margin-right: 20px;
  60.     color: #01d567;
  61.     outline: none;
  62.     cursor: pointer;
  63.   }
  64.   .se-dropdown-icon--down {
  65.     display: inline-block;
  66.     font-size: 12px;
  67.     vertical-align: -0.2em;
  68.   }
  69. </style>

五、 不同位置

根据使用场景，提供 6 种不同方向。

Dropdown 下拉菜单 - 图4

  1. <template>
  2.   <div v-for="(item, key) in directions" :class="key" :key="key">
  3.     <se-dropdown v-for="dir in item" :key="dir[0]" :placement="dir[0]">
  4.       <div class="se-dropdown-link">
  5.         {{dir[1]}}
  6.       </div>
  7.       <se-dropdown-menu slot="menu">
  8.         <se-dropdown-item v-for="item in 5" :key="item">
  9.           {{item}}st menu item
  10.         </se-dropdown-item>
  11.       </se-dropdown-menu>
  12.     </se-dropdown>
  13.   </div>
  14. </template>
  16. <script>
  17.   export default {
  18.     data() {
  19.       return {
  20.         directions: {
  21.           top: [['top-left', '上左'], ['top', '上中'], ['top-right', '上右']],
  22.           bottom: [['bottom-left', '下左'], ['bottom', '下中'], ['bottom-right', '下右']]
  23.         }
  24.       }
  25.     }
  26.   }
  27. </script>
  29. <style>
  30.   .se-dropdown-link {
  31.     color: #01d567;
  32.     outline: none;
  33.     outline: none;
  34.     cursor: pointer;
  35.   }
  36.   .se-dropdown-icon--down {
  37.     display: inline-block;
  38.     font-size: 12px;
  39.     vertical-align: -0.2em;
  40.   }
  41.   .se-dropdown {
  42.     margin: 10px;
  43.   }
  44. </style>

六、 菜单隐藏方式

通过 hide-on-click 属性的配置来控制是否点击菜单任意项后隐藏菜单，将 hide-on-click 属性默认为 false 可以关闭此功能。

Dropdown 下拉菜单 - 图5

<template>
  <se-dropdown :hideOnClick="hideOnClick">
    <div class="se-dropdown-link">
      hover me
      <i class="se-dropdown-icon--down">
        <svg
          viewBox="64 64 896 896"
          focusable="false"
          class=""
          data-icon="down"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
          ></path>
        </svg>
      </i>
    </div>
    <se-dropdown-menu slot="menu">
      <se-dropdown-item v-for="item in 5" :key="item">
        {{item}}st menu item
      </se-dropdown-item>
    </se-dropdown-menu>
  </se-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        hideOnClick: false
      }
    }
  }
</script>

<style>
  .se-dropdown-link {
    color: #01d567;
    outline: none;
    cursor: pointer;
  }

  .se-dropdown-icon--down {
    display: inline-block;
    font-size: 12px;
    vertical-align: -0.2em;
  }
</style>

七、 初始化显示状态

组件内部默认维护了一个控制显示隐藏的状态。当然，你也可以通过 visible 属性自行控制。

Dropdown 下拉菜单 - 图6

<template>
  <div style="height: 220px">
    <se-dropdown :visible="true">
      <div class="se-dropdown-link">
        hover me
        <i class="se-dropdown-icon--down">
          <svg
            viewBox="64 64 896 896"
            focusable="false"
            class=""
            data-icon="down"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
            ></path>
          </svg>
        </i>
      </div>
      <se-dropdown-menu slot="menu">
        <se-dropdown-item v-for="item in 5" :key="item">
          {{item}}st menu item
        </se-dropdown-item>
      </se-dropdown-menu>
    </se-dropdown>
  </div>
</template>

<style>
  .se-dropdown-link {
    color: #01d567;
    outline: none;
    cursor: pointer;
  }

  .se-dropdown-icon--down {
    display: inline-block;
    font-size: 12px;
    vertical-align: -0.2em;
  }
</style>

八、 事件与状态同步

当 dropdown-menu 的展示状态发生变化时（理论上），我们会向外 emit 一个 visibilityChange 事件。

Dropdown 下拉菜单 - 图7

<template>
  <se-dropdown @visibility-change="visibilityChange">
    <div class="se-dropdown-link">
      hover me
      <i class="se-dropdown-icon--down">
        <svg
          viewBox="64 64 896 896"
          focusable="false"
          class=""
          data-icon="down"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
          ></path>
        </svg>
      </i>
    </div>
    <se-dropdown-menu slot="menu">
      <se-dropdown-item v-for="item in 5" :key="item">
        {{item}}st menu item
      </se-dropdown-item>
    </se-dropdown-menu>
  </se-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        visibleArrow: false,
        tabindex: 1
      }
    },
    methods: {
      visibilityChange(visibility) {
        console.log(visibility)
      }
    }
  }
</script>

<style>
  .se-dropdown-link {
    color: #01d567;
    outline: none;
    cursor: pointer;
  }

  .se-dropdown-icon--down {
    display: inline-block;
    font-size: 12px;
    vertical-align: -0.2em;
  }
</style>

另外，还可以使用 sync 修饰符实现状态自动同步。

Dropdown 下拉菜单 - 图8

<template>
  <se-dropdown :visible_sync="visible">
    <div class="se-dropdown-link">
      hover me
      <i class="se-dropdown-icon--down">
        <svg
          viewBox="64 64 896 896"
          focusable="false"
          class=""
          data-icon="down"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
          ></path>
        </svg>
      </i>
    </div>
    <se-dropdown-menu slot="menu">
      <se-dropdown-item v-for="item in 5" :key="item">
        {{item}}st menu item
      </se-dropdown-item>
    </se-dropdown-menu>
  </se-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      }
    }
  }
</script>

<style>
  .se-dropdown-link {
    color: #01d567;
    outline: none;
    cursor: pointer;
  }

  .se-dropdown-icon--down {
    display: inline-block;
    font-size: 12px;
    vertical-align: -0.2em;
  }
</style>

Props

属性类型默认值必填说明
visibleboolean否下拉菜单的默认展现方式 (出现/隐藏)
triggerstringhover / click否触发下拉的⾏为
hide-on-clickbooleantrue否是否在点击菜单项后隐藏菜单
show-delaynumber100否下拉菜单出现的延迟
hide-delaynumber100否下拉菜单消失的延迟
tabindex0否下拉菜单按钮的 tabindex
visible-arrowbooleantrue否是否显示 Menu 箭头
placementstringbottom-left否位置

位置可选值

const placementTypes = ['top-left', 'top', 'top-right', 'bottom-right', 'bottom', 'bottom-left']

DropDown Events

事件名称描述回调函数参数
visibility-change下拉菜单出现/隐藏时触发true / false
item-click点击菜单项触发value

DropDown-Item Props

属性类型默认值必填说明
valuestring / object / number否菜单项目绑定的值
dividedbooleanfalse否分割线