🔨 weView

WDropdown 下拉菜单

基础用法 

<template>
  <w-dropdown>
    <w-button>Dropdown</w-button>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item disabled>Option 1</w-dropdown-item>
        <w-dropdown-item divided>Option 2</w-dropdown-item>
        <w-dropdown-item>Option 3</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

弹出位置

使用placement属性来定义下拉菜单相对触发器的定位，可以使用可以使用 top | top-start | top-end | left | right | bottom | bottom-start | bottom-end | bottom。

<template>
  <w-dropdown>
    <w-button>bottom</w-button>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>Option 1</w-dropdown-item>
        <w-dropdown-item>Option 2</w-dropdown-item>
        <w-dropdown-item>Option 3</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
  <w-dropdown placement="top">
    <w-button>top</w-button>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>Option 1</w-dropdown-item>
        <w-dropdown-item>Option 2</w-dropdown-item>
        <w-dropdown-item>Option 3</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

触发方式

使用trigger属性来定义如何触发下拉菜单，可以使用 hover | click | contextmenu。

<template>
  <w-dropdown>
    <w-button>hover</w-button>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>Option 1</w-dropdown-item>
        <w-dropdown-item>Option 2</w-dropdown-item>
        <w-dropdown-item>Option 3</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
  <w-dropdown trigger='click'>
    <w-button>click</w-button>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>Option 1</w-dropdown-item>
        <w-dropdown-item>Option 2</w-dropdown-item>
        <w-dropdown-item>Option 3</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
  <w-dropdown trigger='contextmenu'>
    <w-button>contextmenu</w-button>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>Option 1</w-dropdown-item>
        <w-dropdown-item>Option 2</w-dropdown-item>
        <w-dropdown-item>Option 3</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

菜单隐藏方式

可以通过 hide-on-click 属性来配置。

下拉菜单默认在点击菜单项后会被隐藏，将 hide-on-click 属性设置为 false 可以关闭此功能。

<template>
  <w-dropdown :hide-on-click="false">
    <w-button>点击 Option 不会关闭</w-button>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>Option 1</w-dropdown-item>
        <w-dropdown-item>Option 2</w-dropdown-item>
        <w-dropdown-item>Option 3</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>
参数说明类型可选值默认值
placement弹出位置stringtop|top-start|top-end|left|right|bottom|bottom-start|bottom-endbottom
trigger触发方式stringhoverclick
hideOnClick点击菜单项时关闭菜单boolean——
showTimeout下拉菜单打开时延number—0
hideTimeout下拉菜单关闭时延number—0
参数说明类型可选值默认值
disabled禁用选项boolean—false
divided选项前加入分割线boolean—false