Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
6c6096dd
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,发现更多精彩内容 >>
提交
6c6096dd
编写于
12月 06, 2021
作者:
Y
Ymm0008
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fixednav 优化
上级
0aaecda9
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
39 addition
and
21 deletion
+39
-21
src/packages/fixednav/doc.md
src/packages/fixednav/doc.md
+1
-0
src/packages/fixednav/fixednav.tsx
src/packages/fixednav/fixednav.tsx
+38
-21
未找到文件。
src/packages/fixednav/doc.md
浏览文件 @
6c6096dd
...
@@ -135,6 +135,7 @@ const selected = (item: any, event: MouseEvent) => {
...
@@ -135,6 +135,7 @@ const selected = (item: any, event: MouseEvent) => {
### Prop
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| 字段 | 说明 | 类型 | 默认值 |
|:---------------|:---------------------------|:--------|:-----------------------------|
|:---------------|:---------------------------|:--------|:-----------------------------|
| fixednavClass | 自定义类名 | String | fixednav |
| visible | 是否打开 | Boolean | false |
| visible | 是否打开 | Boolean | false |
| navList | 悬浮列表内容数据 | Array | [] |
| navList | 悬浮列表内容数据 | Array | [] |
| activeText | 收起列表按钮文案 | String | 收起导航 |
| activeText | 收起列表按钮文案 | String | 收起导航 |
...
...
src/packages/fixednav/fixednav.tsx
浏览文件 @
6c6096dd
import
React
,
{
FunctionComponent
,
useState
,
useEffect
,
MouseEvent
,
HTMLProps
}
from
'
react
'
import
React
,
{
FunctionComponent
,
useState
,
useEffect
,
MouseEvent
,
HTMLProps
}
from
'
react
'
import
{
Icon
}
from
'
../icon/icon
'
import
{
Icon
}
from
'
../icon/icon
'
import
{
Overlay
}
from
'
../overlay/overlay
'
import
bem
from
'
@/utils/bem
'
import
classNames
from
'
classnames
'
import
classNames
from
'
classnames
'
import
{
Overlay
}
from
'
../overlay/overlay
'
import
'
./fixednav.scss
'
import
'
./fixednav.scss
'
type
Direction
=
'
right
'
|
'
left
'
type
Position
=
{
top
?:
string
bottom
?:
string
}
export
interface
FixedNavProps
{
export
interface
FixedNavProps
{
prefixCl
s
:
string
fixednavClas
s
:
string
visible
:
boolean
visible
:
boolean
overlay
:
boolean
overlay
:
boolean
navList
:
Array
<
object
>
navList
:
Array
<
object
>
activeText
:
string
activeText
:
string
unActiveText
:
string
unActiveText
:
string
position
:
object
position
:
Position
type
:
string
type
:
Direction
change
:
Function
change
:
Function
selected
:
Function
selected
:
Function
slotList
:
HTMLProps
<
HTMLElement
>
slotList
:
HTMLProps
<
HTMLElement
>
...
@@ -21,22 +27,21 @@ export interface FixedNavProps {
...
@@ -21,22 +27,21 @@ export interface FixedNavProps {
}
}
const
defaultProps
=
{
const
defaultProps
=
{
prefixCl
s
:
'
nut-fixednav
'
,
fixednavClas
s
:
'
nut-fixednav
'
,
activeText
:
'
收起导航
'
,
activeText
:
'
收起导航
'
,
unActiveText
:
'
快速导航
'
,
unActiveText
:
'
快速导航
'
,
type
:
'
right
'
,
position
:
{
position
:
{
top
:
'
auto
'
,
top
:
'
auto
'
,
bottom
:
'
auto
'
,
bottom
:
'
auto
'
,
},
},
type
:
'
right
'
,
}
as
FixedNavProps
}
as
FixedNavProps
export
const
FixedNav
:
FunctionComponent
<
export
const
FixedNav
:
FunctionComponent
<
Partial
<
FixedNavProps
>
&
React
.
HTMLAttributes
<
HTMLDivElement
>
Partial
<
FixedNavProps
>
&
React
.
HTMLAttributes
<
HTMLDivElement
>
>
=
(
props
)
=>
{
>
=
(
props
)
=>
{
const
{
const
{
prefixCls
,
fixednavClass
,
children
,
overlay
,
overlay
,
visible
,
visible
,
navList
,
navList
,
...
@@ -48,30 +53,42 @@ export const FixedNav: FunctionComponent<
...
@@ -48,30 +53,42 @@ export const FixedNav: FunctionComponent<
type
,
type
,
slotList
,
slotList
,
slotBtn
,
slotBtn
,
...
rest
}
=
{
...
defaultProps
,
...
props
}
}
=
{
...
defaultProps
,
...
props
}
const
selectCb
=
(
event
:
MouseEvent
,
item
:
any
)
=>
{
const
b
=
bem
(
'
fixednav
'
)
const
classes
=
classNames
(
{
active
:
visible
,
},
type
,
fixednavClass
,
b
(
''
)
)
const
onSelectCb
=
(
event
:
MouseEvent
,
item
:
any
):
void
=>
{
selected
(
item
,
event
)
selected
(
item
,
event
)
}
}
const
updateValue
=
(
value
:
boolean
=
!
visible
)
=>
{
const
onUpdateValue
=
(
value
:
boolean
=
!
visible
):
void
=>
{
change
(
value
)
change
(
value
)
}
}
const
[
classNames
,
setClassNames
]
=
useState
(
''
)
//
const [classNames, setClassNames] = useState('')
const
classes
=
()
=>
{
//
const classes = () => {
return
`
${
prefixCl
s
}
${
type
}
${
visible
?
'
active
'
:
''
}
`
// return `${fixednavClas
s} ${type} ${visible ? 'active' : ''}`
}
//
}
useEffect
(()
=>
{
//
useEffect(() => {
setClassNames
(
classes
())
//
setClassNames(classes())
},
[
visible
])
//
}, [visible])
return
(
return
(
<
div
className
=
{
`
${
classNames
}
`
}
style
=
{
position
}
>
<
div
className
=
{
classes
}
style
=
{
position
}
{
...
rest
}
>
{
overlay
&&
(
{
overlay
&&
(
<
Overlay
visible
=
{
visible
}
zIndex
=
{
200
}
onClick
=
{
()
=>
u
pdateValue
(
false
)
}
></
Overlay
>
<
Overlay
visible
=
{
visible
}
zIndex
=
{
200
}
onClick
=
{
()
=>
onU
pdateValue
(
false
)
}
></
Overlay
>
)
}
)
}
<
div
className
=
"list"
>
<
div
className
=
"list"
>
{
slotList
?
(
{
slotList
?
(
...
@@ -82,7 +99,7 @@ export const FixedNav: FunctionComponent<
...
@@ -82,7 +99,7 @@ export const FixedNav: FunctionComponent<
return
(
return
(
<
div
<
div
className
=
"nut-fixednav__list-item"
className
=
"nut-fixednav__list-item"
onClick
=
{
(
event
)
=>
s
electCb
(
event
,
item
)
}
onClick
=
{
(
event
)
=>
onS
electCb
(
event
,
item
)
}
key
=
{
item
.
id
||
index
}
key
=
{
item
.
id
||
index
}
>
>
<
img
src
=
{
item
.
icon
}
/>
<
img
src
=
{
item
.
icon
}
/>
...
@@ -95,7 +112,7 @@ export const FixedNav: FunctionComponent<
...
@@ -95,7 +112,7 @@ export const FixedNav: FunctionComponent<
)
}
)
}
</
div
>
</
div
>
<
div
className
=
"nut-fixednav__btn"
onClick
=
{
()
=>
u
pdateValue
()
}
>
<
div
className
=
"nut-fixednav__btn"
onClick
=
{
()
=>
onU
pdateValue
()
}
>
{
slotBtn
?
(
{
slotBtn
?
(
slotBtn
slotBtn
)
:
(
)
:
(
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录