【Vue3】【Naive UI】＜NDropdown＞标签

【VUE3】【Naive UI】＜NCard＞ 标签
【VUE3】【Naive UI】＜n-button＞ 标签
【VUE3】【Naive UI】＜a＞ 标签
【VUE3】【Naive UI】＜NDropdown＞ 标签
【VUE3】【Naive UI】＜n-upload＞标签

<n-dropdown> 是 Naive UI 库中的一个组件，它提供了多种属性来定制下拉菜单的行为和外观。
下面我将详细介绍 <n-dropdown> 的一些主要属性，并为每个属性提供示例代码。
请注意，这些示例基于 Naive UI 的官方文档和常见的使用场景。

基本设置

- options (Option[]): 定义下拉菜单的选项列表。
-<template>
  <n-dropdown :options="menuOptions">
    <n-button>打开下拉菜单</n-button>
  </n-dropdown>
</template>

<script setup>
import { NDropdown, NButton } from 'naive-ui';

const menuOptions = [
  { label: '选项一', value: 'option1' },
  { label: '选项二', value: 'option2' },
  { label: '选项三', value: 'option3' }
];
</script>

• trigger (string | TriggerType): 设置触发下拉菜单的方式，可以是 click, hover, 或 context-menu。

 <n-dropdown :options="menuOptions" trigger="hover">
  <n-button>悬停显示菜单</n-button>
</n-dropdown>

• placement (Placement): 指定下拉菜单相对于触发元素的位置，如 top, bottom, left, right 以及它们的组合。

<n-dropdown :options="menuOptions" placement="bottom-left">
  <n-button>底部左侧显示菜单</n-button>
</n-dropdown>

自定义渲染

• render (() => VNodeChild): 自定义触发下拉菜单的内容。

<n-dropdown :options="menuOptions" :render="renderTriggerContent">
  <!-- 渲染内容由 render 函数决定 -->
</n-dropdown>

<script setup>
import { NDropdown, NIcon, NButton } from 'naive-ui';
import { InfoOutline } from '@vicons/material';

function renderTriggerContent() {
  return (
    <n-button>
      <n-icon><InfoOutline /></n-icon>
      更多操作
    </n-button>
  );
}
</script>

• options-render ((options: Option[]) => VNodeChild): 自定义整个下拉菜单的内容。

<n-dropdown :options="menuOptions" :options-render="renderMenuOptions">
  <n-button>自定义菜单内容</n-button>
</n-dropdown>

<script setup>
function renderMenuOptions(options) {
  return options.map(option => (
    <div key={option.value} style="padding: 8px;">
      {option.label}
    </div>
  ));
}
</script>

交互事件

• on-select ((key: Key, option: Option, event: MouseEvent) => void): 当用户选择了一个选项时触发。

<n-dropdown :options="menuOptions" @select="handleSelect">
  <n-button>选择后触发事件</n-button>
</n-dropdown>

<script setup>
function handleSelect(key, option, event) {
  console.log('选择了:', key, option);
}
</script>

• on-update:show ((show: boolean) => void): 当下拉菜单显示/隐藏状态发生变化时触发。

<n-dropdown :options="menuOptions" @update:show="handleShowChange">
  <n-button>显示/隐藏变化</n-button>
</n-dropdown>

<script setup>
function handleShowChange(show) {
  console.log('菜单是否显示:', show);
}
</script>

其他属性

• disabled (boolean): 是否禁用下拉菜单。

<n-dropdown :options="menuOptions" disabled>
  <n-button>禁用的下拉菜单</n-button>
</n-dropdown>

• virtual-scroll (boolean): 开启虚拟滚动以优化大量选项时的性能。

<n-dropdown :options="largeMenuOptions" virtual-scroll>
  <n-button>带有虚拟滚动的菜单</n-button>
</n-dropdown>

<script setup>
// largeMenuOptions 包含大量的选项
</script>

• to (HTMLElement | string): 将下拉菜单渲染到指定的目标节点。

<n-dropdown :options="menuOptions" to="#dropdown-container">
  <n-button>渲染到特定容器</n-button>
</n-dropdown>
<div id="dropdown-container"></div>