Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
0240f0bd
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
0240f0bd
编写于
9月 05, 2022
作者:
O
oasis-cloud
提交者:
GitHub
9月 05, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: menu scrollFixed 属性 (#268)
* feat: menu taro 适配 * feat: menu 增加 scroll-fixed
上级
a102dbea
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
347 addition
and
26 deletion
+347
-26
src/config.json
src/config.json
+2
-0
src/packages/menu/demo.taro.tsx
src/packages/menu/demo.taro.tsx
+2
-5
src/packages/menu/doc.en-US.md
src/packages/menu/doc.en-US.md
+6
-5
src/packages/menu/doc.md
src/packages/menu/doc.md
+6
-5
src/packages/menu/doc.zh-TW.md
src/packages/menu/doc.zh-TW.md
+298
-0
src/packages/menu/menu.taro.tsx
src/packages/menu/menu.taro.tsx
+1
-1
src/packages/menu/menu.tsx
src/packages/menu/menu.tsx
+19
-3
src/packages/menuitem/menuitem.taro.tsx
src/packages/menuitem/menuitem.taro.tsx
+6
-5
src/sites/mobile-taro/src/app.config.ts
src/sites/mobile-taro/src/app.config.ts
+6
-1
src/sites/mobile-taro/src/app.scss
src/sites/mobile-taro/src/app.scss
+1
-1
未找到文件。
src/config.json
浏览文件 @
0240f0bd
...
...
@@ -335,6 +335,7 @@
"desc"
:
"向下弹出的菜单列表"
,
"sort"
:
13
,
"show"
:
true
,
"taro"
:
true
,
"author"
:
"oasis-cloud"
},
{
...
...
@@ -346,6 +347,7 @@
"sort"
:
14
,
"exportEmpty"
:
true
,
"show"
:
false
,
"taro"
:
true
,
"author"
:
"oasis-cloud"
}
]
...
...
src/packages/menu/demo.taro.tsx
浏览文件 @
0240f0bd
import
React
,
{
useEffect
,
useState
}
from
'
react
'
import
'
./demo.scss
'
import
Button
from
'
../button/index.taro
'
import
{
Menu
}
from
'
./menu.taro
'
import
MenuItem
from
'
../menuitem/index.taro
'
import
{
useTranslate
}
from
'
../../sites/assets/locale
'
import
{
useTranslate
}
from
'
@/sites/assets/locale/taro
'
import
{
Menu
,
MenuItem
,
Button
}
from
'
@/packages/nutui.react.taro
'
const
MenuDemo
=
()
=>
{
const
style
=
`
...
...
src/packages/menu/doc.en-US.md
浏览文件 @
0240f0bd
...
...
@@ -277,12 +277,13 @@ export default App
### Menu Props
| 参数
| 说明 | 类型 | 默认值 |
|---------------------
-------------
|--------------------------------|-------------------------|---------|
| activeColor
| Active color of title and option | String | #F2270C |
| 参数 | 说明 | 类型 | 默认值 |
|---------------------|--------------------------------|-------------------------|---------|
| activeColor | Active color of title and option | String | #F2270C |
| closeOnClickOverlay | Whether to close when overlay is clicked | Boolean | true |
| lockScroll | Whether the background is locked | Boolean | true |
| titleIcon | Custome title icon | String | - |
| lockScroll | Whether the background is locked | Boolean | true |
| scrollFixed | Whether to fixed when window is scrolled, fixed position can be set | Boolean、String、Number | true |
| titleIcon | Custome title icon | String | - |
### MenuItem Props
...
...
src/packages/menu/doc.md
浏览文件 @
0240f0bd
...
...
@@ -268,12 +268,13 @@ export default App
### Menu Props
| 参数
| 说明 | 类型 | 默认值 |
|---------------------
-------------
|--------------------------------|-------------------------|---------|
| activeColor
| 选项的选中态图标颜色 | String | #F2270C |
| 参数 | 说明 | 类型 | 默认值 |
|---------------------|--------------------------------|-------------------------|---------|
| activeColor | 选项的选中态图标颜色 | String | #F2270C |
| closeOnClickOverlay | 是否在点击遮罩层后关闭菜单 | Boolean | true |
| lockScroll | 背景是否锁定 | Boolean | true |
| titleIcon | 自定义标题图标 | String | - |
| lockScroll | 背景是否锁定 | Boolean | true |
| scrollFixed | 滚动后是否固定,可设置固定位置 | Boolean、String、Number | true |
| titleIcon | 自定义标题图标 | String | - |
### MenuItem Props
...
...
src/packages/menu/doc.zh-TW.md
0 → 100644
浏览文件 @
0240f0bd
# Menu 菜單
### 介紹
向下彈出的菜單列表
### 安裝
```
javascript
import
{
Menu
,
MenuItem
}
from
'
@nutui/nutui-react
'
;
```
## 代碼演示
### 基礎用法
:::demo
```
tsx
import
React
from
'
react
'
;
import
{
Menu
,
MenuItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
options
]
=
useState
([
{
text
:
'
全部商品
'
,
value
:
0
},
{
text
:
'
新款商品
'
,
value
:
1
},
{
text
:
'
活動商品
'
,
value
:
2
},
])
const
[
options1
]
=
useState
([
{
text
:
'
默認排序
'
,
value
:
'
a
'
},
{
text
:
'
好評排序
'
,
value
:
'
b
'
},
{
text
:
'
銷量排序
'
,
value
:
'
c
'
},
])
return
(
<>
<
div
className
=
"demo full"
>
<
Menu
>
<
MenuItem
options
=
{
options
}
value
=
{
0
}
/>
<
MenuItem
options
=
{
options1
}
value
=
'a'
/>
</
Menu
>
</
div
>
</>
)
}
export
default
App
```
:::
### 自定義菜單內容
使用實例上的 toggle 方法可以手動關閉彈框。
:::demo
```
tsx
import
React
from
'
react
'
;
import
{
Menu
,
MenuItem
,
Button
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
options
]
=
useState
([
{
text
:
'
全部商品
'
,
value
:
0
},
{
text
:
'
新款商品
'
,
value
:
1
},
{
text
:
'
活動商品
'
,
value
:
2
},
])
const
[
options1
]
=
useState
([
{
text
:
'
默認排序
'
,
value
:
'
a
'
},
{
text
:
'
好評排序
'
,
value
:
'
b
'
},
{
text
:
'
銷量排序
'
,
value
:
'
c
'
},
])
return
(
<>
<
div
className
=
"demo full"
>
<
Menu
>
<
MenuItem
options
=
{
options
}
value
=
{
0
}
/>
<
MenuItem
title
=
"篩選"
>
<
div
>
自定義內容
</
div
>
<
Button
>
確認
</
Button
>
</
MenuItem
>
</
Menu
>
</
div
>
</>
)
}
export
default
App
```
:::
### 一行兩列
:::demo
```
tsx
import
React
from
'
react
'
;
import
{
Menu
,
MenuItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
options
]
=
useState
([
{
text
:
'
全部商品
'
,
value
:
0
},
{
text
:
'
新款商品
'
,
value
:
1
},
{
text
:
'
活動商品
'
,
value
:
2
},
])
return
(
<>
<
div
className
=
"demo full"
>
<
Menu
>
<
MenuItem
options
=
{
options
}
value
=
{
0
}
columns
=
{
2
}
/>
</
Menu
>
</
div
>
</>
)
}
export
default
App
```
:::
### 自定義選中態顏色
:::demo
```
tsx
import
React
from
'
react
'
;
import
{
Menu
,
MenuItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
options
]
=
useState
([
{
text
:
'
全部商品
'
,
value
:
0
},
{
text
:
'
新款商品
'
,
value
:
1
},
{
text
:
'
活動商品
'
,
value
:
2
},
])
const
[
options1
]
=
useState
([
{
text
:
'
默認排序
'
,
value
:
'
a
'
},
{
text
:
'
好評排序
'
,
value
:
'
b
'
},
{
text
:
'
銷量排序
'
,
value
:
'
c
'
},
])
return
(
<>
<
div
className
=
"demo full"
>
<
Menu
activeColor
=
"green"
>
<
MenuItem
options
=
{
options
}
value
=
{
0
}
/>
<
MenuItem
options
=
{
options1
}
value
=
"a"
/>
</
Menu
>
</
div
>
</>
)
}
export
default
App
```
:::
### 自定義圖標
:::demo
```
tsx
import
React
from
'
react
'
;
import
{
Menu
,
MenuItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
options
]
=
useState
([
{
text
:
'
全部商品
'
,
value
:
0
},
{
text
:
'
新款商品
'
,
value
:
1
},
{
text
:
'
活動商品
'
,
value
:
2
},
])
const
[
options1
]
=
useState
([
{
text
:
'
默認排序
'
,
value
:
'
a
'
},
{
text
:
'
好評排序
'
,
value
:
'
b
'
},
{
text
:
'
銷量排序
'
,
value
:
'
c
'
},
])
return
(
<>
<
div
className
=
"demo full"
>
<
Menu
titleIcon
=
"joy-smile"
>
<
MenuItem
options
=
{
options
}
value
=
{
0
}
optionsIcon
=
"success"
/>
<
MenuItem
options
=
{
options1
}
value
=
"a"
/>
</
Menu
>
</
div
>
</>
)
}
export
default
App
```
:::
### 向上展開
:::demo
```
tsx
import
React
from
'
react
'
;
import
{
Menu
,
MenuItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
options
]
=
useState
([
{
text
:
'
全部商品
'
,
value
:
0
},
{
text
:
'
新款商品
'
,
value
:
1
},
{
text
:
'
活動商品
'
,
value
:
2
},
])
const
[
options1
]
=
useState
([
{
text
:
'
默認排序
'
,
value
:
'
a
'
},
{
text
:
'
好評排序
'
,
value
:
'
b
'
},
{
text
:
'
銷量排序
'
,
value
:
'
c
'
},
])
return
(
<>
<
div
className
=
"demo full"
>
<
Menu
>
<
MenuItem
options
=
{
options
}
value
=
{
0
}
direction
=
"up"
/>
<
MenuItem
options
=
{
options1
}
value
=
"a"
direction
=
"up"
/>
</
Menu
>
</
div
>
</>
)
}
export
default
App
```
:::
### 禁用菜單
:::demo
```
tsx
import
React
from
'
react
'
;
import
{
Menu
,
MenuItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
options
]
=
useState
([
{
text
:
'
全部商品
'
,
value
:
0
},
{
text
:
'
新款商品
'
,
value
:
1
},
{
text
:
'
活動商品
'
,
value
:
2
},
])
const
[
options1
]
=
useState
([
{
text
:
'
默認排序
'
,
value
:
'
a
'
},
{
text
:
'
好評排序
'
,
value
:
'
b
'
},
{
text
:
'
銷量排序
'
,
value
:
'
c
'
},
])
return
(
<>
<
div
className
=
"demo full"
>
<
Menu
>
<
MenuItem
options
=
{
options
}
value
=
{
0
}
disabled
/>
<
MenuItem
options
=
{
options1
}
value
=
"a"
disabled
/>
</
Menu
>
</
div
>
</>
)
}
export
default
App
```
:::
## API
### Menu Props
| 參數 | 說明 | 類型 | 默認值 |
|---------------------|--------------------------------|-------------------------|---------|
| activeColor | 選項的選中態圖標顏色 | String | #F2270C |
| closeOnClickOverlay | 是否在點擊遮罩層後關閉菜單 | Boolean | true |
| lockScroll | 背景是否鎖定 | Boolean | true |
| scrollFixed | 滾動後是否固定,可設置固定位置 | Boolean、String、Number | true |
| titleIcon | 自定義標題圖標 | String | - |
### MenuItem Props
| 參數 | 說明 | 類型 | 默認值 |
|-------------------------------|-----------------------------------------|---------|------------------|
| title | 菜單項標題 | String | 當前選中項文字 |
| options | 選項數組 | Array | - |
| disabled | 是否禁用菜單 | Boolean | false |
| columns | 可以設置一行展示多少列 options | Number | 1 |
| optionsIcon | 自定義選項圖標 | String | 'Check' |
| direction | 菜單展開方向,可選值為up | String | 'down' |
| activeClassName | 選項選中時自定義標題樣式類 | String | - |
| inactiveClassName | 選項非選中時自定義標題樣式類 | String | - |
| fontClassName | 自定義icon 字體基礎類名 | string |
`nutui-iconfont`
|
| iconClassPrefix | 自定義icon 類名前綴,用於使用自定義圖標 | string |
`nut-icon`
|
### MenuItem Events
| 事件名 | 說明 | 回調參數 |
|----------|----------------------|--------------|
| onChange | 選擇 option 之後觸發 | 選擇的 value |
\ No newline at end of file
src/packages/menu/menu.taro.tsx
浏览文件 @
0240f0bd
import
React
,
{
FunctionComponent
,
useEffect
,
useRef
,
useState
}
from
'
react
'
import
classnames
from
'
classnames
'
import
Icon
from
'
@/packages/icon/index.taro
'
import
{
OptionItem
}
from
'
@/packages/menuitem/menuitem
'
import
{
OptionItem
}
from
'
@/packages/menuitem/menuitem
.taro
'
export
interface
MenuProps
{
className
:
string
...
...
src/packages/menu/menu.tsx
浏览文件 @
0240f0bd
...
...
@@ -38,8 +38,20 @@ export const Menu: FunctionComponent<Partial<MenuProps>> = (props) => {
...
props
,
}
const
parentRef
=
useRef
(
null
)
const
[
isScrollFixed
,
setIsScrollFixed
]
=
useState
(
false
)
const
onScroll
=
()
=>
{}
const
getScrollTop
=
(
el
:
Element
|
Window
)
=>
{
return
Math
.
max
(
0
,
'
scrollTop
'
in
el
?
el
.
scrollTop
:
el
.
pageYOffset
)
}
const
onScroll
=
()
=>
{
const
{
scrollFixed
}
=
props
const
scrollTop
=
getScrollTop
(
window
)
console
.
log
(
scrollTop
)
const
isFixed
=
scrollTop
>
(
typeof
scrollFixed
===
'
boolean
'
?
30
:
Number
(
scrollFixed
))
setIsScrollFixed
(
isFixed
)
}
useEffect
(()
=>
{
if
(
scrollFixed
)
{
...
...
@@ -83,9 +95,13 @@ export const Menu: FunctionComponent<Partial<MenuProps>> = (props) => {
})
})
}
console
.
log
(
'
isScrollFixed
'
,
isScrollFixed
)
return
(
<
div
className
=
{
`nut-menu
${
className
}
`
}
{
...
rest
}
ref
=
{
parentRef
}
>
<
div
className
=
{
`nut-menu
${
className
}
${
isScrollFixed
?
'
scroll-fixed
'
:
''
}
`
}
{
...
rest
}
ref
=
{
parentRef
}
>
<
div
className
=
{
`nut-menu__bar
${
itemShow
.
includes
(
true
)
?
'
opened
'
:
''
...
...
src/packages/menuitem/menuitem.taro.tsx
浏览文件 @
0240f0bd
...
...
@@ -97,11 +97,12 @@ export const MenuItem: FunctionComponent<Partial<MenuItemProps>> = (props) => {
const
getParentOffset
=
()
=>
{
setTimeout
(()
=>
{
const
p
=
parent
.
parent
().
current
const
rect
=
p
.
getBoundingClientRect
()
console
.
log
(
rect
,
p
.
offsetTop
,
window
.
screenTop
)
setPosition
({
height
:
rect
.
height
,
top
:
rect
.
top
,
const
rect
=
p
.
getBoundingClientRect
().
then
((
rect
:
any
)
=>
{
setPosition
({
height
:
rect
.
height
,
top
:
rect
.
top
,
})
})
})
}
...
...
src/sites/mobile-taro/src/app.config.ts
浏览文件 @
0240f0bd
...
...
@@ -22,6 +22,7 @@ const subPackages = [
'
pages/pagination/index
'
,
'
pages/tabs/index
'
,
'
pages/indicator/index
'
,
'
pages/menu/index
'
,
],
},
{
...
...
@@ -44,7 +45,11 @@ const subPackages = [
},
{
root
:
'
feedback
'
,
pages
:
[
'
pages/actionsheet/index
'
,
'
pages/switch/index
'
],
pages
:
[
'
pages/actionsheet/index
'
,
'
pages/switch/index
'
,
'
pages/pulltorefresh/index
'
,
],
},
{
root
:
'
exhibition
'
,
...
...
src/sites/mobile-taro/src/app.scss
浏览文件 @
0240f0bd
...
...
@@ -45,7 +45,7 @@
padding
:
0px
17px
10px
17px
;
&
.full
{
padding
:
57px
0
0
0
;
padding
:
0
0
0
0
;
h2
{
padding-left
:
17px
;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录