nutui-uniapp

Appearance

Menu 菜单 ​

介绍 ​

向下弹出的菜单列表。

基础用法 ​

html
<template>
  <nut-menu>
    <nut-menu-item v-model="state.value1" :options="options1"></nut-menu-item>
    <nut-menu-item v-model="state.value2" :options="options2" @change="onChange"></nut-menu-item>
  </nut-menu>
</template>
ts
const state = reactive({
  value1: 0,
  value2: "a"
});

const options1 = ref([
  { text: "全部商品", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 }
]);

const options2 = ref([
  { text: "默认排序", value: "a" },
  { text: "好评排序", value: "b" },
  { text: "销量排序", value: "c" }
]);

function onChange(value: number | string) {
  console.log("change", value);
}

滚动固定 ​

启用 scroll-fixed 属性可以滚动一定距离后变更为 fixed 定位。

自 1.7.13 开始，必须配合 scroll-top 属性使用，需要将 onPageScroll 的 scrollTop 传给组件。

对于 1.7.12 及以下的版本，由于 uni-app 中组件单独声明 onPageScroll 无效，需要手动在页面中声明一次 onPageScroll 后组件内部 才能正确获取 scrollTop 的值，参考 question-136635。

html
<template>
  <nut-menu scroll-fixed :scroll-top="scrollTop">
    <nut-menu-item v-model="state.value1" :options="options1"></nut-menu-item>
    <nut-menu-item v-model="state.value2" :options="options2"></nut-menu-item>
  </nut-menu>

  <!-- 可以通过 CSS 变量修改 fixed 状态的 top -->
  <nut-menu
    custom-style="--nut-menu-scroll-fixed-top: 44px"
    scroll-fixed
    :scroll-top="scrollTop"
  >
    <!--  ...  -->
  </nut-menu>

  <!-- 也可以传数字类型的值修改固定的阈值（单位：px） -->
  <nut-menu :scroll-fixed="100" :scroll-top="scrollTop">
    <!--  ...  -->
  </nut-menu>
</template>
ts
const scrollTop = ref(0);

onPageScroll((res) => {
  scrollTop.value = res.scrollTop;
});

自定义菜单内容 ​

使用实例上的 toggle() 方法可以手动关闭弹框。

html
<template>
  <nut-menu>
    <nut-menu-item v-model="state.value1" :options="options1" />
    <nut-menu-item ref="menuItemEl" title="筛选">
      <view class="flex flex-col items-center">
        <text>自定义内容</text>
        <nut-button @click="confirm()">确认</nut-button>
      </view>
    </nut-menu-item>
  </nut-menu>
</template>
ts
import type { MenuItemInst } from "nutui-uniapp";

const menuItemEl = ref<MenuItemInst>();

const state = reactive({
  value1: 0
});

const options1 = ref([
  { text: "全部商品", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 }
]);

function confirm() {
  menuItemEl.value.toggle();
}

一行两列 ​

html
<template>
  <nut-menu>
    <nut-menu-item
      v-model="value"
      :options="options"
      :cols="2"
    ></nut-menu-item>
  </nut-menu>
</template>

自定义选中态颜色 ​

html
<template>
  <nut-menu active-color="green">
    <nut-menu-item v-model="state.value1" :options="options1"></nut-menu-item>
    <nut-menu-item v-model="state.value2" :options="options2"></nut-menu-item>
  </nut-menu>
</template>

自定义图标 ​

html
<template>
  <nut-menu>
    <template #icon>
      <nut-icon name="triangle-down"></nut-icon>
    </template>

    <nut-menu-item v-model="state.value1" :options="options1"></nut-menu-item>
    <nut-menu-item v-model="state.value2" :options="options2">
      <template #icon>
        <nut-icon name="checked"></nut-icon>
      </template>
    </nut-menu-item>
  </nut-menu>
</template>

向上展开 ​

html
<template>
  <nut-menu direction="up">
    <nut-menu-item v-model="state.value1" :options="options1"></nut-menu-item>
    <nut-menu-item v-model="state.value2" :options="options2"></nut-menu-item>
  </nut-menu>
</template>

禁用菜单 ​

html
<template>
  <nut-menu>
    <nut-menu-item v-model="state.value1" :options="options1" disabled></nut-menu-item>
    <nut-menu-item v-model="state.value2" :options="options2" disabled></nut-menu-item>
  </nut-menu>
</template>

API ​

Props ​

参数说明类型可选值默认值
active-color选项的选中态图标颜色string-#F2270C
close-on-click-overlay是否在点击遮罩层后关闭菜单boolean-true
scroll-fixed滚动后是否固定boolean / string / number-false
scroll-top 1.7.13页面的滚动距离number-0
title-class自定义标题样式类string--
lock-scroll H5背景是否锁定boolean-true
title-icon自定义标题图标string--
direction展开方向stringup / downdown
up-icon收起的图标string-rect-up
down-icon展开的图标string-rect-down

Slots ​

名称说明
icon自定义标题图标（不支持小程序）
参数说明类型可选值默认值
v-model选中值string / number--
title菜单项标题string--
options选项数组Array-[]
disabled是否禁用菜单boolean-false
cols一行展示多少列number-1
active-title-class选项选中时自定义标题样式类string--
inactive-title-class选项非选中时自定义标题样式类string--
option-icon选项选中时选中图标string--
事件名说明类型
change选择选项时触发(value: number | string) => void
open打开菜单栏时触发() => void
close关闭菜单栏时触发() => void
item-click 1.7.11点击选项时触发(item: MenuItemOption) => void
名称说明
icon自定义选项图标（不支持小程序）

通过 ref 可以获取到 MenuItem 实例并调用实例方法。

名称说明类型
toggle切换菜单展示状态（传 true 为显示，false 为隐藏，不传参为取反）(show?: boolean) => boolean
change 1.7.11变更选择项(value?: number | string) => void

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-menu-bar-line-height48px
--nut-menu-item-font-sizevar(--nut-font-size-2)
--nut-menu-item-text-colorvar(--nut-title-color)
--nut-menu-item-active-text-colorvar(--nut-primary-color)
--nut-menu-bar-border-bottom-color#eaf0fb
--nut-menu-bar-opened-z-index2001
--nut-menu-item-disabled-color#969799
--nut-menu-title-text-padding-left8px
--nut-menu-title-text-padding-right8px
--nut-menu-item-content-padding12px 24px
--nut-menu-item-content-max-height214px
--nut-menu-item-option-padding-top12px
--nut-menu-item-option-padding-bottom12px
--nut-menu-item-option-i-margin-right6px
--nut-menu-bar-box-shadow0 2px 12px rgba(89, 89, 89, 0.12)
--nut-menu-scroll-fixed-top0
--nut-menu-scroll-fixed-z-index1000
--nut-menu-active-item-font-weight500

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者