BIN-UI-DESIGN

Appearance

On this page

下拉菜单 Dropdown ​

空显示状态，用于给内部无数据情况的展示。十分简单

基础用法 ​

下拉菜单 
<template>
  <div>
    <b-dropdown>
      <a href="javascript:void(0)">
        下拉菜单
        <b-icon name="down"></b-icon>
      </a>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item selected>驴肉火烧</b-dropdown-item>
          <b-dropdown-item disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item>牛肉板面</b-dropdown-item>
          <b-dropdown-item divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item>街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>

    <b-dropdown style="margin-left: 20px">
      <b-button type="primary">
        下拉菜单
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>驴肉火烧</b-dropdown-item>
          <b-dropdown-item disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item>牛肉板面</b-dropdown-item>
          <b-dropdown-item divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item>街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </div>
</template>
<template>
  <div>
    <b-dropdown>
      <a href="javascript:void(0)">
        下拉菜单
        <b-icon name="down"></b-icon>
      </a>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item selected>驴肉火烧</b-dropdown-item>
          <b-dropdown-item disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item>牛肉板面</b-dropdown-item>
          <b-dropdown-item divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item>街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>

    <b-dropdown style="margin-left: 20px">
      <b-button type="primary">
        下拉菜单
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>驴肉火烧</b-dropdown-item>
          <b-dropdown-item disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item>牛肉板面</b-dropdown-item>
          <b-dropdown-item divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item>街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </div>
</template>

触发方式 ​

<template>
  <b-space>
    <b-dropdown trigger="hover">
      <b-button type="primary">
        hover 触发
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item name="驴肉火烧" selected>驴肉火烧</b-dropdown-item>
          <b-dropdown-item name="炸酱面" disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item name="牛肉板面">牛肉板面</b-dropdown-item>
          <b-dropdown-item name="地锅鸡" divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item name="街边烧烤">街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
    <b-dropdown>
      <b-button type="primary">
        click 触发
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item selected>驴肉火烧</b-dropdown-item>
          <b-dropdown-item disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item>牛肉板面</b-dropdown-item>
          <b-dropdown-item divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item>街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
    <b-dropdown trigger="contextmenu">
      <b-button type="primary">
        右键 触发
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>返回</b-dropdown-item>
          <b-dropdown-item style="color: #ed4014">删除</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </b-space>
</template>
<template>
  <b-space>
    <b-dropdown trigger="hover">
      <b-button type="primary">
        hover 触发
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item name="驴肉火烧" selected>驴肉火烧</b-dropdown-item>
          <b-dropdown-item name="炸酱面" disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item name="牛肉板面">牛肉板面</b-dropdown-item>
          <b-dropdown-item name="地锅鸡" divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item name="街边烧烤">街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
    <b-dropdown>
      <b-button type="primary">
        click 触发
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item selected>驴肉火烧</b-dropdown-item>
          <b-dropdown-item disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item>牛肉板面</b-dropdown-item>
          <b-dropdown-item divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item>街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
    <b-dropdown trigger="contextmenu">
      <b-button type="primary">
        右键 触发
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>返回</b-dropdown-item>
          <b-dropdown-item style="color: #ed4014">删除</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </b-space>
</template>

嵌套用法 ​

<template>
  <div>
    <b-dropdown placement="right-start">
      <a href="javascript:void(0)">
        徐州小吃
        <b-icon name="down"></b-icon>
      </a>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>驴肉火烧</b-dropdown-item>
          <b-dropdown-item>牛肉板面</b-dropdown-item>
          <b-dropdown placement="right-start">
            <b-dropdown-item>
              特色菜系
              <b-icon name="right"></b-icon>
            </b-dropdown-item>
            <template #dropdown>
              <b-dropdown-menu>
                <b-dropdown-item>地锅鸡</b-dropdown-item>
                <b-dropdown-item>狗肉</b-dropdown-item>
                <b-dropdown-item>把子肉</b-dropdown-item>
              </b-dropdown-menu>
            </template>
          </b-dropdown>
          <b-dropdown-item>过桥米线</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </div>
</template>
<template>
  <div>
    <b-dropdown placement="right-start">
      <a href="javascript:void(0)">
        徐州小吃
        <b-icon name="down"></b-icon>
      </a>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item>驴肉火烧</b-dropdown-item>
          <b-dropdown-item>牛肉板面</b-dropdown-item>
          <b-dropdown placement="right-start">
            <b-dropdown-item>
              特色菜系
              <b-icon name="right"></b-icon>
            </b-dropdown-item>
            <template #dropdown>
              <b-dropdown-menu>
                <b-dropdown-item>地锅鸡</b-dropdown-item>
                <b-dropdown-item>狗肉</b-dropdown-item>
                <b-dropdown-item>把子肉</b-dropdown-item>
              </b-dropdown-menu>
            </template>
          </b-dropdown>
          <b-dropdown-item>过桥米线</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </div>
</template>

指令事件 ​

<template>
  <div>
    <b-dropdown @command="handleClick">
      <b-button>
        下拉菜单
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item name="驴肉火烧" selected>驴肉火烧</b-dropdown-item>
          <b-dropdown-item name="炸酱面" disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item name="牛肉板面">牛肉板面</b-dropdown-item>
          <b-dropdown-item :name="['徐州美食', '地锅鸡']" divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item :name="{ type: 'info', name: '街边烧烤' }">街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </div>
</template>

<script setup lang="ts">
import { Message } from 'bin-ui-design'

function handleClick(name) {
  console.log(name)
  Message('click on item: ' + JSON.stringify(name))
}
</script>
<template>
  <div>
    <b-dropdown @command="handleClick">
      <b-button>
        下拉菜单
        <b-icon name="down"></b-icon>
      </b-button>
      <template #dropdown>
        <b-dropdown-menu>
          <b-dropdown-item name="驴肉火烧" selected>驴肉火烧</b-dropdown-item>
          <b-dropdown-item name="炸酱面" disabled>炸酱面</b-dropdown-item>
          <b-dropdown-item name="牛肉板面">牛肉板面</b-dropdown-item>
          <b-dropdown-item :name="['徐州美食', '地锅鸡']" divided>地锅鸡</b-dropdown-item>
          <b-dropdown-item :name="{ type: 'info', name: '街边烧烤' }">街边烧烤</b-dropdown-item>
        </b-dropdown-menu>
      </template>
    </b-dropdown>
  </div>
</template>

<script setup lang="ts">
import { Message } from 'bin-ui-design'

function handleClick(name) {
  console.log(name)
  Message('click on item: ' + JSON.stringify(name))
}
</script>
参数说明类型可选值默认值
trigger触发方式Stringhover（悬停）click（点击）contextMenu（右键）click
placement下拉菜单出现的位置Stringtop top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-endbottom
appendToBody是否放置于 body 内, 在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果Booleantrue
hide-on-click是否在点击菜单项后隐藏菜单Boolean-true
show-timeout展开下拉菜单的延时（仅在 trigger 为 hover 时有效）Number-150
hide-timeout是否在点击菜单项后隐藏菜单Number-150
tabindexDropdown 组件的 tabindexNumber-0
事件名说明返回值
command点击菜单项时触发DropdownItem 的 name 值,需要设置name才可以统一监听
visible-change菜单显示状态改变时调用visible
名称说明
default主体内容
dropdown列表内容，一般由 b-dropdown-menu 填充
参数说明类型可选值默认值
name用来标识这一项Object, String, Number--
disabled禁用该项Boolean-false
divided显示分割线Boolean-false
selected标记该项为选中状态Boolean-false
icon图标String--

MIT Licensed | Copyright © 2023-present bin-ui-design