Win Design

Dropdown 下拉菜单

代码演示

患者就诊状态

基础用法

将鼠标移至下拉菜单上，可以展开更多的菜单内容。

查看代码 < />

<template>
  <w-dropdown>
    <span class="w-dropdown-trigger">
      患者就诊状态
      <i class="w-icon-arrow-bottom"></i>
    </span>
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>待就诊</w-dropdown-menu-item>
      <w-dropdown-menu-item>就诊中</w-dropdown-menu-item>
      <w-dropdown-menu-item>检查中</w-dropdown-menu-item>
      <w-dropdown-menu-item disabled>检验中</w-dropdown-menu-item>
      <w-dropdown-menu-item divided>已就诊</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
</template>

触发

默认整体触发、触发方式是hover，可以改变trigger属性来改变触发方式 hover / click。当iconTrigger为true时，触发对象将改为下拉icon，而按钮则恢复为普通的点击对象。

查看代码 < />

<template>
  <w-dropdown iconTrigger @button-click="handleButtonClick">
    触发对象
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>选项一</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项二</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项三</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
  <w-dropdown trigger="click" style="margin-left: 10px">
    <w-button type="primary">触发方式
      <i class="w-icon-arrow-bottom"></i>
    </w-button>
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>选项一</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项二</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项三</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
</template>
<script>
export default {
  methods: {
    handleButtonClick () {
      alert('我被点击了')
    }
  }
}
</script>

尺寸选择

当下拉菜单的触发对象是icon, 即iconTrigger = true时, 可以调整下拉菜单的大小, 尺寸可选值为按钮组件的可选值：large、medium、small、mini。

查看代码 < />

<template>
  <w-dropdown iconTrigger size="large">
    large
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>选项一</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项二</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项三</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
  <w-dropdown iconTrigger size="medium">
    medium
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>选项一</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项二</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项三</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
  <w-dropdown iconTrigger size="small">
    small
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>选项一</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项二</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项三</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
  <w-dropdown iconTrigger size="mini">
    mini
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>选项一</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项二</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项三</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
</template>

禁用状态

为dropdown 添加 disabled 值即可禁用该组件，注意，自定义的触发对象时，需要自行控制元素 disabled 状态。

查看代码 < />

<template>
  <w-dropdown
    icon-trigger
    disabled>
    触发对象
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>选项一</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项二</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项三</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
  <w-dropdown
    trigger="click"
    disabled
    style="margin-left: 10px">
    <w-button
      type="primary"
      disabled>触发方式
      <i class="w-icon-arrow-bottom"></i>
    </w-button>
    <w-dropdown-menu slot="dropdown-menu">
      <w-dropdown-menu-item>选项一</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项二</w-dropdown-menu-item>
      <w-dropdown-menu-item>选项三</w-dropdown-menu-item>
    </w-dropdown-menu>
  </w-dropdown>
</template>

API

参数 说明 类型 可选值 默认值 Version
icon-trigger 触发对象为icon Boolean — —
disabled 禁用下拉菜单 Boolean — — v1.6.5
popper-class 为 popper 添加类名 String — —
popper-width 下拉框的宽度 String — —
size 触发对象为icon时,更改按钮组的大小 String large、medium、small、mini medium
trigger 触发方式 String click / hover hover
参数 说明 类型 可选值 默认值 Version
divided 分割线(为true时, 在该选项之上产生分割线) Boolean — —
disabled 选项禁用 Boolean — —

Slot

参数 说明 Version
— 触发对象DOM
事件名称 说明 回调参数 Version
button-click 触发对象为icon时, icon之前的button被点击时触发 —
toggle 下拉框显示与隐藏时触发 true显示, false隐藏
事件名称 说明 回调参数 Version
item-click 选项被点击时触发 event

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 6/4/2020, 4:33:11 PM

← Menu 菜单 →