mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-11 13:10:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(menu): add show prop for option (#3372)

Browse Source 
* feat(menu): add hidden prop

* change hidden to show prop

* Apply suggestions from code review

Co-authored-by: 勤劳上班的卑微小张 <jiazhan.zhang@ggimage.com>
Co-authored-by: XieZongChen <46394163+amadeus711@users.noreply.github.com>
This commit is contained in:
居里栈栈 2022-08-07 20:19:28 +08:00 committed by GitHub
parent 8c44c3dc83
commit 84a5550418
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 212 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.en-US.md
View File

@ -17,6 +17,7 @@
### Feats
- `n-menu` add `show` prop to set whether the Menu item is show, closes [#3334](https://github.com/TuSimple/naive-ui/issues/3334)
- `n-alert` adds `bordered` prop, closes [#3358](https://github.com/TuSimple/naive-ui/issues/3358).
- `n-tag` add `trigger-click-on-close` prop, closes [#3343](https://github.com/TuSimple/naive-ui/issues/3343).
- `n-cascader` adds `disabled-field` prop, closes [#3338](https://github.com/TuSimple/naive-ui/issues/3338).

1
CHANGELOG.zh-CN.md
View File

@ -17,6 +17,7 @@
### Feats
- `n-menu` 新增 `show` 属性，用于是否显示菜单，关闭 [#3334](https://github.com/TuSimple/naive-ui/issues/3334)
- `n-alert` 新增 `bordered` 属性，关闭 [#3358](https://github.com/TuSimple/naive-ui/issues/3358)
- `n-tag` 新增 `trigger-click-on-close` 属性，关闭 [#3343](https://github.com/TuSimple/naive-ui/issues/3343)
- `n-cascader` 新增 `disabled-field` 属性，关闭 [#3338](https://github.com/TuSimple/naive-ui/issues/3338)

11
demo/pages/docs/import-on-demand/enUS/index.md
View File

@ -72,9 +72,14 @@ export default defineConfig({
imports: [
'vue',
{
'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
},
],
'naive-ui': [
'useDialog',
'useMessage',
'useNotification',
'useLoadingBar'
]
}
]
}),
Components({
resolvers: [NaiveUiResolver()]

13
demo/pages/docs/import-on-demand/zhCN/index.md
View File

@ -52,7 +52,7 @@ Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。
## 自动引入
可以使用 `unplugin-auto-import` 插件来自动导入API。
可以使用 `unplugin-auto-import` 插件来自动导入 API。
如果使用模板方式进行开发，可以使用 `unplugin-vue-components` 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件。
@ -72,9 +72,14 @@ export default defineConfig({
imports: [
'vue',
{
'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
},
],
'naive-ui': [
'useDialog',
'useMessage',
'useNotification',
'useLoadingBar'
]
}
]
}),
Components({
resolvers: [NaiveUiResolver()]

4
src/dropdown/demos/enUS/index.demo-entry.md
View File

@ -76,5 +76,5 @@ For other props, for example `placement`, please see [Popover Props](popover#Pop
| Property | Type | Description |
| -------- | ------------------ | -------------------------------------- |
| type | `'render'` | The type of the DropdownRenderOption. |
| key? | `string \| number` | Render option ID (should be unique). |
| render? | `() => VNodeChild` | Render function of the option content. |
| key? | `string \| number` | Render option ID (should be unique). |
| render? | `() => VNodeChild` | Render function of the option content. |

8
src/dropdown/demos/zhCN/index.demo-entry.md
View File

@ -61,7 +61,7 @@ scrollable-debug.vue
| 属性 | 类型 | 说明 |
| ---- | ------------------ | ------------ |
| type | `'divider'` | 分割线的类型 |
| key? | `string \| number` | 需要唯一 |
| key? | `string \| number` | 需要唯一 |
#### DropdownGroupOption Type
@ -75,8 +75,8 @@ scrollable-debug.vue
#### DropdownRenderOption Type
| 属性 | 类型 | 说明 |
| ------ | ------------------ | --------------------------- |
| type | `'render'` | DropdownRenderOption 的类型 |
| 属性 | 类型 | 说明 |
| ------- | ------------------ | --------------------------- |
| type | `'render'` | DropdownRenderOption 的类型 |
| key? | `string \| number` | 渲染选项 ID（应该是唯一的） |
| render? | `() => VNodeChild` | 选项内容的渲染功能 |

2
src/menu/demos/enUS/index.demo-entry.md
View File

@ -19,6 +19,7 @@ accordion.vue
router-link.vue
customize-field.vue
expand-selected-option.vue
show.vue
```
## API
@ -62,6 +63,7 @@ expand-selected-option.vue
| --- | --- | --- |
| children? | `Array<MenuOption \| MenuGroupOption>` | Child menu options. |
| disabled? | `boolean` | Whether to disable the menu item. |
| show? | `boolean` | Whether to show the menu item. |
| extra? | `string \| (() => VNodeChild)` | The extra parts of the menu item. |
| icon? | `() => VNodeChild` | The icon for the menu item. |
| key | `string` | The indentifier of the menu item. |

74
src/menu/demos/enUS/show.demo.vue Normal file
View File

@ -0,0 +1,74 @@
<markdown>
# Control option display
In some cases, different characters will see different menus. You can use the `show` prop to hide the menu.
</markdown>
<template>
<n-space vertical>
<n-switch v-model:value="accordion">
<template #checked>
hidden menu
</template>
<template #unchecked>
show menu
</template>
</n-switch>
<n-menu :options="options" />
</n-space>
</template>
<script lang="ts">
import { defineComponent, ref, Component, h, computed } from 'vue'
import { NIcon } from 'naive-ui'
import {
BookOutline as BookIcon,
PersonOutline as PersonIcon
} from '@vicons/ionicons5'
export default defineComponent({
setup () {
const accordionRef = ref(false)
function renderIcon (icon: Component) {
return () => h(NIcon, null, { default: () => h(icon) })
}
const MenuOptions = computed(() => [
{
label: 'parent 1',
icon: renderIcon(PersonIcon),
key: '1',
children: [
{
label: '1.1',
key: '2'
}
]
},
{
label: 'parent 2',
key: '3',
icon: renderIcon(BookIcon),
show: !accordionRef.value,
children: [
{
label: '2.1',
key: '4'
},
{
label: '2.2',
key: '5'
},
{
label: '2.3',
key: '6'
}
]
}
])
return {
accordion: accordionRef,
options: MenuOptions
}
}
})
</script>

2
src/menu/demos/zhCN/index.demo-entry.md
View File

@ -19,6 +19,7 @@ accordion.vue
router-link.vue
customize-field.vue
expand-selected-option.vue
show.vue
debug.vue
```
@ -63,6 +64,7 @@ debug.vue
| --------- | -------------------------------------- | ---------------- |
| children? | `Array<MenuOption \| MenuGroupOption>` | 子选项 |
| disabled? | `boolean` | 是否禁用菜单项 |
| show? | `boolean` | 是否显示菜单项 |
| extra? | `string \| (() => VNodeChild)` | 菜单项的额外部分 |
| icon? | `() => VNode` | 菜单项的图标 |
| key | `string` | 菜单项的标识符 |

74
src/menu/demos/zhCN/show.demo.vue Normal file
View File

@ -0,0 +1,74 @@
<markdown>
# 控制选项的显示隐藏
在某种情况下，不同的角色会看到不同的菜单。你可以使用 `show` 属性来隐藏菜单。
</markdown>
<template>
<n-space vertical>
<n-switch v-model:value="accordion">
<template #checked>
老板
</template>
<template #unchecked>
打工人
</template>
</n-switch>
<n-menu :options="options" />
</n-space>
</template>
<script lang="ts">
import { defineComponent, ref, Component, h, computed } from 'vue'
import { NIcon } from 'naive-ui'
import {
BookOutline as BookIcon,
PersonOutline as PersonIcon
} from '@vicons/ionicons5'
export default defineComponent({
setup () {
const accordionRef = ref(false)
function renderIcon (icon: Component) {
return () => h(NIcon, null, { default: () => h(icon) })
}
const MenuOptions = computed(() => [
{
label: '提升效率的法宝',
icon: renderIcon(PersonIcon),
key: '1',
children: [
{
label: '如何提高产出',
key: '2'
}
]
},
{
label: '摸鱼宝典',
key: '3',
icon: renderIcon(BookIcon),
show: !accordionRef.value,
children: [
{
label: '你摸鱼',
key: '4'
},
{
label: '我摸鱼',
key: '5'
},
{
label: '老板宝马变青桔',
key: '6'
}
]
}
])
return {
accordion: accordionRef,
options: MenuOptions
}
}
})
</script>

4
src/menu/src/Menu.tsx
View File

@ -95,6 +95,10 @@ export const menuProps = {
default: undefined
},
disabled: Boolean,
show: {
type: Boolean,
defalut: true
},
inverted: Boolean,
'onUpdate:expandedKeys': [Function, Array] as PropType<
MaybeArray<OnUpdateKeys>

5
src/menu/src/utils.tsx
View File

@ -36,7 +36,10 @@ export function itemRenderer (
menuProps: MenuSetupProps
): VNode | undefined {
const { rawNode } = tmNode
const { show } = rawNode
if (typeof show === 'boolean' && !show) {
return null
}
if (isIgnoredNode(rawNode)) {
if (isDividerNode(rawNode)) {
return <NMenuDivider key={tmNode.key} {...rawNode.props} />

24
src/menu/tests/Menu.spec.tsx
View File

@ -406,4 +406,28 @@ describe('n-menu', () => {
/>
)
})
it('should work with `hidden` prop', async () => {
const options = [
{
label: 'fantasy',
key: 'fantasy',
show: false
},
{
label: 'mojito',
key: 'mojito'
},
{
label: 'initialj',
key: 'initialj'
}
]
const wrapper = mount(NMenu, {
props: {
options: options
}
})
expect(wrapper.findAll('.n-menu-item-content').length).toBe(2)
})
})

1
src/popconfirm/demos/enUS/index.demo-entry.md
View File

@ -38,4 +38,5 @@ For more props, see [popover](popover#Popover-Props).
| icon | `()` | Popconfirm icon. |
### Popconfirm Methods
See [popover](popover#Popover-Methods).

1
src/popconfirm/demos/zhCN/index.demo-entry.md
View File

@ -38,4 +38,5 @@ actions.vue
| icon | `()` | 弹出确认的图标 |
### Popconfirm Methods
See [popover](popover#Popover-Methods)

7
src/tag/demos/zhCN/closable.demo.vue
View File

@ -16,12 +16,7 @@
<n-tag type="error" closable @close="handleClose">
手写的从前
</n-tag>
<n-tag
type="info"
closable
@click="handleClick"
@close="handleClose"
>
<n-tag type="info" closable @click="handleClick" @close="handleClose">
哪里都是你
</n-tag>
</n-space>