Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
ba821599
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
ba821599
编写于
3月 16, 2021
作者:
richard_1015
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'next' of
https://github.com/jdf2e/nutui
into next
上级
21fd43d0
314e6182
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
72 addition
and
68 deletion
+72
-68
src/packages/menu/demo.vue
src/packages/menu/demo.vue
+19
-19
src/packages/menu/doc.md
src/packages/menu/doc.md
+18
-18
src/packages/menu/index.scss
src/packages/menu/index.scss
+1
-1
src/packages/menu/index.vue
src/packages/menu/index.vue
+10
-4
src/packages/menuitem/index.scss
src/packages/menuitem/index.scss
+1
-1
src/packages/menuitem/index.vue
src/packages/menuitem/index.vue
+23
-25
未找到文件。
src/packages/menu/demo.vue
浏览文件 @
ba821599
...
...
@@ -2,28 +2,28 @@
<div
class=
"demo full menu-demo"
>
<h2>
基础用法
</h2>
<nut-menu>
<nut-menu-item
:menu
L
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList"
:title=
"title"
></nut-menu-item>
<nut-menu-item
:menu
-l
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
-l
ist=
"menuList"
:title=
"title"
></nut-menu-item>
</nut-menu>
<h2>
多列展示
</h2>
<nut-menu>
<nut-menu-item
class=
"base-style"
:menu
L
ist=
"menuList2"
:menu
-l
ist=
"menuList2"
title=
"单列展示"
multi
S
tyle=
"1"
max
H
eight=
"200"
multi
-s
tyle=
"1"
max
-h
eight=
"200"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList2"
:menu
-l
ist=
"menuList2"
title=
"双列展示"
multi
S
tyle=
"2"
multi
-s
tyle=
"2"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList2"
:menu
-l
ist=
"menuList2"
title=
"三列展示"
multi
S
tyle=
"3"
multi
-s
tyle=
"3"
></nut-menu-item>
</nut-menu>
...
...
@@ -33,14 +33,14 @@
属性控制下拉菜单列表是否选择后自动收起,默认自动收起。
</p
>
<nut-menu>
<nut-menu-item
:menu
L
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
-l
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList"
:menu
-l
ist=
"menuList"
title=
"禁止自动收起"
:auto
C
lose=
"false"
:auto
-c
lose=
"false"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList2"
:menu
-l
ist=
"menuList2"
title=
"筛选"
disabled
></nut-menu-item>
...
...
@@ -48,9 +48,9 @@
<h2>
禁止蒙层展示
</h2>
<p
class=
"tips"
>
属性`hasMask`控制是否有蒙层,默认为 `true`展示蒙层
</p>
<nut-menu
:has
M
ask=
"false"
>
<nut-menu-item
:menu
L
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList"
:title=
"title"
></nut-menu-item>
<nut-menu
:has
-m
ask=
"false"
>
<nut-menu-item
:menu
-l
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
-l
ist=
"menuList"
:title=
"title"
></nut-menu-item>
</nut-menu>
<h2>
点击事件
</h2>
...
...
@@ -59,14 +59,14 @@
>
<nut-menu>
<nut-menu-item
:menu
L
ist=
"menuList"
:menu
-l
ist=
"menuList"
title=
"选择菜单列表项"
multi
S
tyle=
"2"
multi
-s
tyle=
"2"
@
menu-click=
"alertText($event, 'title')"
@
on-change=
"getChecked"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList2"
:menu
-l
ist=
"menuList2"
title=
"选中标题触发"
disabled
@
menu-click=
"alertText"
...
...
src/packages/menu/doc.md
浏览文件 @
ba821599
...
...
@@ -23,8 +23,8 @@ app.use(Menu);
```
html
<nut-menu>
<nut-menu-item
:menu
L
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList"
:title=
"title"
></nut-menu-item>
<nut-menu-item
:menu
-l
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
-l
ist=
"menuList"
:title=
"title"
></nut-menu-item>
</nut-menu>
```
```
js
...
...
@@ -49,9 +49,9 @@ app.use(Menu);
```
html
<nut-menu>
<nut-menu-item
:menu
List=
"menuList2"
title=
"单列展示"
multiS
tyle=
"1"
maxHeight=
"200"
></nut-menu-item>
<nut-menu-item
:menu
List=
"menuList2"
title=
"双列展示"
multiS
tyle=
"2"
></nut-menu-item>
<nut-menu-item
:menu
List=
"menuList2"
title=
"三列展示"
multiS
tyle=
"3"
></nut-menu-item>
<nut-menu-item
:menu
-list=
"menuList2"
title=
"单列展示"
multi-s
tyle=
"1"
maxHeight=
"200"
></nut-menu-item>
<nut-menu-item
:menu
-list=
"menuList2"
title=
"双列展示"
multi-s
tyle=
"2"
></nut-menu-item>
<nut-menu-item
:menu
-list=
"menuList2"
title=
"三列展示"
multi-s
tyle=
"3"
></nut-menu-item>
</nut-menu>
```
...
...
@@ -62,9 +62,9 @@ app.use(Menu);
```
html
<nut-menu>
<nut-menu-item
:menu
L
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
List=
"menuList"
:title=
"title"
:autoC
lose=
"false"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList2"
title=
"筛选"
disabled
></nut-menu-item>
<nut-menu-item
:menu
-l
ist=
"menuList"
title=
"最新商品"
></nut-menu-item>
<nut-menu-item
:menu
-list=
"menuList"
title=
"title"
:auto-c
lose=
"false"
></nut-menu-item>
<nut-menu-item
:menu
-l
ist=
"menuList2"
title=
"筛选"
disabled
></nut-menu-item>
</nut-menu>
```
...
...
@@ -73,9 +73,9 @@ app.use(Menu);
```
html
<nut-menu
:hasMask=
"false"
>
<nut-menu-item
:menu
L
ist=
"menuList"
title=
"最新商品"
>
<nut-menu-item
:menu
-l
ist=
"menuList"
title=
"最新商品"
>
</nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList"
:title=
"title"
>
<nut-menu-item
:menu
-l
ist=
"menuList"
:title=
"title"
>
</nut-menu-item>
</nut-menu>
```
...
...
@@ -87,14 +87,14 @@ app.use(Menu);
```
html
<nut-menu>
<nut-menu-item
:menu
L
ist=
"menuList2"
:menu
-l
ist=
"menuList2"
title=
"选择菜单列表项"
multi
S
tyle=
"2"
multi
-s
tyle=
"2"
@
menu-click=
"alertText($event, 'title')"
@
on-change=
"getChecked"
></nut-menu-item>
<nut-menu-item
:menu
L
ist=
"menuList2"
:menu
-l
ist=
"menuList2"
title=
"选中标题触发"
disabled
@
menu-click=
"alertText"
...
...
@@ -141,12 +141,12 @@ const alertText = (info, type) => {
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| title | 菜单标题名称或可为菜单列表第一项,必填 | String | - |
| menu
L
ist | 菜单列表数据,必填 | Array | - |
| multi
S
tyle | 列表列数设置,默认1列,可选值
`1`
`2`
`3`
| String, Number | 1 |
| menu
-l
ist | 菜单列表数据,必填 | Array | - |
| multi
-s
tyle | 列表列数设置,默认1列,可选值
`1`
`2`
`3`
| String, Number | 1 |
| disabled | 是否开启禁用设置,默认不开启 | Boolean | false |
| max
H
eight | 菜单列表最大高度,单位px | String, Number | - |
| auto
C
lose | 选择后下拉菜单列表是否自动收起,默认自动收起 | Boolean | true |
|has
M
ask| 是否有蒙层 | Boolean | true|
| max
-h
eight | 菜单列表最大高度,单位px | String, Number | - |
| auto
-c
lose | 选择后下拉菜单列表是否自动收起,默认自动收起 | Boolean | true |
|has
-m
ask| 是否有蒙层 | Boolean | true|
### Events
...
...
src/packages/menu/index.scss
浏览文件 @
ba821599
.nut-menu
{
background
:
#fff
;
background
:
$white
;
display
:
flex
;
align-items
:
center
;
position
:
relative
;
...
...
src/packages/menu/index.vue
浏览文件 @
ba821599
<
template
>
<view
class=
"nut-menu
"
:style=
"showMask && `z-index:9999`"
>
<view
:class=
"classes
"
:style=
"showMask && `z-index:9999`"
>
<slot></slot>
</view>
</
template
>
<
script
lang=
"ts"
>
import
{
toRefs
,
reactive
,
provide
}
from
'
vue
'
;
import
{
toRefs
,
reactive
,
provide
,
computed
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
componentName
,
create
}
=
createComponent
(
'
menu
'
);
import
menuitem
from
'
@/packages/menuitem/index.vue
'
;
...
...
@@ -25,14 +25,20 @@ export default create({
const
state
=
reactive
({
showMask
:
false
});
const
handleMaskShow
=
status
=>
{
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
return
{
[
prefixCls
]:
true
};
});
const
handleMaskShow
=
(
status
:
boolean
)
=>
{
state
.
showMask
=
status
;
};
provide
(
'
menuRelation
'
,
{
handleMaskShow
,
hasMask
:
props
.
hasMask
});
return
{
...
toRefs
(
state
)
};
return
{
...
toRefs
(
state
)
,
classes
};
}
});
</
script
>
...
...
src/packages/menuitem/index.scss
浏览文件 @
ba821599
...
...
@@ -8,7 +8,7 @@
&
.disabled
{
color
:
#999
;
}
&
.nut-menu-active
{
&
.nut-menu-
item-
active
{
.nut-menu-title
{
font-weight
:
bold
;
.icon
{
...
...
src/packages/menuitem/index.vue
浏览文件 @
ba821599
<
template
>
<view
id=
"menuId"
class=
"nut-menu-item"
:class=
"[
{ disabled: disabled }, { 'nut-menu-active': showPanel }]"
>
<view
:class=
"classes"
>
<nut-popup
v-model:show=
"showMask"
></nut-popup>
<view
class=
"nut-menu-title"
@
click=
"handleMenuPanel"
>
<view
class=
"title-name"
v-html=
"menuTitle"
></view>
<
i
class=
"icon"
></i
>
<
nut-icon
class-prefix=
"icon"
></nut-icon
>
</view>
<view
class=
"nut-menu-panel"
ref=
"menuPanel"
:style=
"`max-height:$
{maxHeight}px`"
>
<view
class=
"nut-menu-panel"
:style=
"`max-height:$
{maxHeight}px`">
<view
v-if=
"menuList && menuList.length"
class=
"menu-list"
...
...
@@ -25,18 +17,19 @@
>
<view
class=
"menu-option"
:class=
"
{ checked: currMenu == index }"
:class=
"
{ checked: currMenu ==
=
index }"
v-for="(item, index) in menuList"
:key="index"
@click="checkMenus(item, index)"
>
<nut-icon
>
<nut-icon
class=
"check-icon"
v-if=
"currMenu == index"
v-if=
"currMenu ==
=
index"
name=
"Check"
size=
"14px"
></nut-icon
>
{{
item
.
value
}}
</view
>
>
{{
item
.
value
}}
</view
>
</view>
<slot></slot>
</view>
...
...
@@ -48,15 +41,13 @@ import {
toRefs
,
onMounted
,
ref
,
nextTick
,
computed
,
watch
,
onUnmounted
,
provide
,
inject
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
create
}
=
createComponent
(
'
menu-item
'
);
const
{
create
,
componentName
}
=
createComponent
(
'
menu-item
'
);
export
default
create
({
props
:
{
title
:
{
...
...
@@ -79,7 +70,7 @@ export default create({
},
multiStyle
:
{
type
:
[
String
,
Number
],
default
:
1
//可选值1、2、3
default
:
1
},
maxHeight
:
{
type
:
[
String
,
Number
],
...
...
@@ -88,7 +79,6 @@ export default create({
},
emits
:
[
'
on-change
'
,
'
menu-click
'
],
setup
(
props
,
{
emit
})
{
const
{
menuList
,
multiStyle
}
=
toRefs
(
props
);
const
menuTitle
=
ref
(
props
.
title
);
const
menu
=
inject
(
'
menuRelation
'
);
const
parent
:
any
=
reactive
(
menu
as
any
);
...
...
@@ -98,6 +88,15 @@ export default create({
showMask
:
false
});
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
return
{
[
prefixCls
]:
true
,
disabled
:
props
.
disabled
,
[
`
${
prefixCls
}
-active`
]:
state
.
showPanel
};
});
const
handleMenuPanel
=
()
=>
{
emit
(
'
menu-click
'
,
menuTitle
.
value
);
//禁用
...
...
@@ -111,7 +110,7 @@ export default create({
parent
.
handleMaskShow
(
state
.
showPanel
);
}
};
//menu列表浮层展示和隐藏
const
handleShowAndHide
=
(
event
:
any
)
=>
{
const
menuBox
=
document
.
querySelectorAll
(
'
.nut-menu-active
'
)[
0
];
if
(
menuBox
&&
state
.
showPanel
)
{
...
...
@@ -149,12 +148,11 @@ export default create({
false
;
});
return
{
classes
,
...
toRefs
(
state
),
...
toRefs
(
parent
),
handleMenuPanel
,
checkMenus
,
menuTitle
,
multiStyle
menuTitle
};
}
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录