Dropdown 下拉菜单

Dropdown 下拉菜单

这是 Dropdown 基础例子

<script setup lang="ts">
import { type VNode, ref } from 'vue'
import { Button as NpButton } from 'npc-ui'

export interface MenuOption {
  key: string | number
  label: string | VNode
  disabled?: boolean
  divided?: boolean
}

const options = ref<MenuOption[]>([
  { key: '0', label: '下拉菜单0' },
  { key: '1', label: '下拉菜单1' },
  { key: '2', label: '下拉菜单2' },
  { key: '3', label: '下拉菜单3', divided: true, disabled: true },
  { key: '4', label: '下拉菜单4', divided: true },
])

function onSelect(ev: MenuOption) {
  console.log(ev)
}
</script>

<template>
  <div class="dropdown-demo">
    <NpDropdown
      :menu-options="options"
      @select="onSelect"
    >
      <NpButton>Hover 下拉菜单</NpButton>
    </NpDropdown>
    <NpDropdown
      :menu-options="options"
      placement="top"
      trigger="click"
      @select="onSelect"
    >
      <NpButton>Click 下拉菜单</NpButton>
    </NpDropdown>
  </div>
</template>

<style scoped>
.dropdown-demo {
  margin: 20px;
  display: flex;
  gap: 20px;
}
</style>

Dropdown 下拉菜单

这是 Dropdown 基础例子

<script setup lang="ts">
import { type VNode, ref } from 'vue'

export interface MenuOption {
  key: string | number
  label: string | VNode
  disabled?: boolean
  divided?: boolean
}

const options = ref<MenuOption[]>([
  { key: '0', label: '下拉菜单0' },
  { key: '1', label: '下拉菜单1' },
  { key: '2', label: '下拉菜单2' },
  { key: '3', label: '下拉菜单3', divided: true, disabled: true },
  { key: '4', label: '下拉菜单4', divided: true },
])

const tooltipRef = ref()
function open() {
  tooltipRef.value?.show()
}
function close() {
  tooltipRef.value?.hide()
}

function onSelect(ev: MenuOption) {
  console.log(ev)
}
</script>

<template>
  <div class="dropdown-demo">
    <NpDropdown
      ref="tooltipRef"
      :menu-options="options"
      placement="bottom"
      manual
      @select="onSelect"
    >
      <NpButton>下拉菜单</NpButton>
    </NpDropdown>

    <NpButton type="primary" @click="open">
      手动触发显示
    </NpButton>
    <NpButton type="danger" @click="close">
      手动触发隐藏
    </NpButton>
  </div>
</template>

<style scoped>
.dropdown-demo {
  margin: 20px;
  display: flex;
  gap: 20px;
}
</style>