Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
132099b3
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,发现更多精彩内容 >>
提交
132099b3
编写于
3月 23, 2021
作者:
S
suzigang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: collapse
上级
008cb18e
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
54 addition
and
61 deletion
+54
-61
src/packages/collapse/doc.md
src/packages/collapse/doc.md
+1
-1
src/packages/collapse/index.vue
src/packages/collapse/index.vue
+17
-33
src/packages/collapseitem/index.vue
src/packages/collapseitem/index.vue
+36
-27
未找到文件。
src/packages/collapse/doc.md
浏览文件 @
132099b3
...
...
@@ -99,7 +99,7 @@ setup() {
|------|------|------|
| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
### CollapseItem Prop
s
### CollapseItem Prop
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| title | 标题栏左侧内容 | string | - |
...
...
src/packages/collapse/index.vue
浏览文件 @
132099b3
<
template
>
<view
@
changeEvt=
"changeEvt"
>
<view>
<slot></slot>
</view>
</
template
>
<
script
lang=
"ts"
>
import
{
toRefs
,
provide
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
create
}
=
createComponent
(
'
collapse
'
);
import
collapseitem
from
'
@/packages/collapseitem/index.vue
'
;
const
{
create
}
=
createComponent
(
'
collapse
'
);
export
default
create
({
children
:
[
collapseitem
],
props
:
{
...
...
@@ -56,54 +56,38 @@ export default create({
},
emits
:
[
'
update:active
'
,
'
change
'
],
setup
(
props
,
{
emit
})
{
const
{
active
}
=
toRefs
(
props
);
// 多个 item 展开
const
changeValAry
=
(
name
:
any
)
=>
{
const
changeVal
=
(
val
:
string
|
number
|
Array
<
string
|
number
>
)
=>
{
emit
(
'
update:active
'
,
val
);
emit
(
'
change
'
,
val
);
};
const
changeValAry
=
(
name
:
string
)
=>
{
const
activeItem
:
any
=
active
?.
valu
e
instanceof
Object
?
Object
.
values
(
active
.
valu
e
)
:
active
?.
valu
e
;
props
.
activ
e
instanceof
Object
?
Object
.
values
(
props
.
activ
e
)
:
props
.
activ
e
;
let
index
=
-
1
;
activeItem
.
forEach
((
item
:
string
|
number
,
idx
:
number
)
=>
{
if
(
String
(
item
)
==
String
(
name
))
{
index
=
idx
;
}
});
const
v
=
JSON
.
parse
(
JSON
.
stringify
(
activeItem
));
index
>
-
1
?
v
.
splice
(
index
,
1
)
:
v
.
push
(
name
);
emit
(
'
update:active
'
,
v
);
emit
(
'
change
'
,
v
);
};
// 更新v-modal的值
const
changeVal
=
(
val
:
string
|
number
|
Array
<
string
|
number
>
,
expanded
:
boolean
)
=>
{
emit
(
'
update:active
'
,
val
);
emit
(
'
change
'
,
val
);
index
>
-
1
?
activeItem
.
splice
(
index
,
1
)
:
activeItem
.
push
(
name
);
changeVal
(
activeItem
);
};
const
isExpanded
=
(
name
:
string
|
number
|
Array
<
string
|
number
>
)
=>
{
const
{
accordion
,
active
}
=
props
;
if
(
accordion
)
{
if
(
typeof
active
==
'
number
'
||
typeof
active
==
'
string
'
)
{
return
active
==
name
;
}
else
{
return
false
;
}
return
typeof
active
===
'
number
'
||
typeof
active
===
'
string
'
?
active
==
name
:
false
;
}
};
provide
(
'
collapseParent
'
,
{
children
:
[],
value
:
props
.
active
,
accordion
:
props
.
accordion
,
expandIconPosition
:
props
.
expandIconPosition
,
titleIcon
:
props
.
titleIcon
,
titleIconPosition
:
props
.
titleIconPosition
,
icon
:
props
.
icon
,
rotate
:
props
.
rotate
,
props
,
changeValAry
,
changeVal
,
isExpanded
...
...
src/packages/collapseitem/index.vue
浏览文件 @
132099b3
<
template
>
<view
:class=
"[
'nut-collapse-item',
{ 'nut-collapse-item-left': classDirection == 'left' },
{ 'nut-collapse-item-icon': icon
&&
icon != 'none' }
]"
>
<view
:class=
"classes"
>
<view
:class=
"[
'collapse-item',
...
...
@@ -79,7 +73,7 @@ import {
ComponentInternalInstance
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
create
}
=
createComponent
(
'
collapse-item
'
);
const
{
create
,
componentName
}
=
createComponent
(
'
collapse-item
'
);
export
default
create
({
props
:
{
...
...
@@ -107,6 +101,14 @@ export default create({
setup
(
props
)
{
const
collapse
:
any
=
inject
(
'
collapseParent
'
);
const
parent
:
any
=
reactive
(
collapse
);
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
return
{
[
prefixCls
]:
true
,
[
`
${
prefixCls
}
-left`
]:
parent
.
props
.
classDirection
===
'
left
'
,
[
`
${
prefixCls
}
-icon`
]:
parent
.
props
.
icon
&&
parent
.
props
.
icon
!==
'
none
'
};
});
const
relation
=
(
child
:
ComponentInternalInstance
):
void
=>
{
if
(
child
.
proxy
)
{
parent
.
children
.
push
(
child
.
proxy
);
...
...
@@ -124,14 +126,14 @@ export default create({
'
background-repeat
'
:
'
no-repeat
'
,
'
background-size
'
:
'
100% 100%
'
,
transform
:
'
rotate(0deg)
'
,
marginTop
:
parent
.
iconHeght
?
'
-
'
+
parent
.
iconHeght
/
2
+
'
px
'
marginTop
:
parent
.
props
.
iconHeght
?
'
-
'
+
parent
.
props
.
iconHeght
/
2
+
'
px
'
:
'
-10px
'
}
});
const
titleIconStyle
=
reactive
({
titleIcon
:
parent
.
titleIcon
,
titleIconPosition
:
parent
.
titleIconPosition
,
titleIcon
:
parent
.
props
.
titleIcon
,
titleIconPosition
:
parent
.
props
.
titleIconPosition
,
titleIconWH
:
{
width
:
'
13px
'
,
height
:
'
13px
'
...
...
@@ -164,10 +166,15 @@ export default create({
wrapperRefEle
.
style
.
height
=
!
proxyData
.
openExpanded
?
0
:
contentHeight
;
if
(
parent
.
icon
&&
parent
.
icon
!=
'
none
'
&&
!
proxyData
.
openExpanded
)
{
if
(
parent
.
props
.
icon
&&
parent
.
props
.
icon
!=
'
none
'
&&
!
proxyData
.
openExpanded
)
{
proxyData
.
iconStyle
[
'
transform
'
]
=
'
rotate(0deg)
'
;
}
else
{
proxyData
.
iconStyle
[
'
transform
'
]
=
'
rotate(
'
+
parent
.
rotate
+
'
deg)
'
;
proxyData
.
iconStyle
[
'
transform
'
]
=
'
rotate(
'
+
parent
.
props
.
rotate
+
'
deg)
'
;
}
}
if
(
!
proxyData
.
openExpanded
)
{
...
...
@@ -182,15 +189,15 @@ export default create({
const
defaultOpen
=
()
=>
{
open
();
if
(
parent
.
icon
&&
parent
.
icon
!=
'
none
'
)
{
if
(
parent
.
props
.
icon
&&
parent
.
props
.
icon
!=
'
none
'
)
{
proxyData
[
'
iconStyle
'
][
'
transform
'
]
=
'
rotate(
'
+
parent
.
rotate
+
'
deg)
'
;
'
rotate(
'
+
parent
.
props
.
rotate
+
'
deg)
'
;
}
};
const
currentName
=
computed
(()
=>
props
.
name
);
const
toggleOpen
=
()
=>
{
if
(
parent
.
accordion
)
{
if
(
parent
.
props
.
accordion
)
{
parent
.
children
.
forEach
((
item
:
any
,
index
:
number
)
=>
{
if
(
currentName
.
value
==
item
.
name
)
{
item
.
changeOpen
(
!
item
.
openExpanded
);
...
...
@@ -200,7 +207,7 @@ export default create({
}
});
nextTick
(()
=>
{
parent
.
changeVal
(
currentName
.
value
,
!
proxyData
.
openExpanded
);
parent
.
changeVal
(
currentName
.
value
);
animation
();
});
}
else
{
...
...
@@ -228,7 +235,7 @@ export default create({
onMounted
(()
=>
{
const
{
name
}
=
props
;
const
active
=
parent
&&
parent
.
valu
e
;
const
active
=
parent
&&
parent
.
props
.
activ
e
;
if
(
typeof
active
==
'
number
'
||
typeof
active
==
'
string
'
)
{
if
(
name
==
active
)
{
...
...
@@ -241,21 +248,23 @@ export default create({
}
}
proxyData
.
classDirection
=
parent
.
expandIconPosition
;
if
(
parent
.
icon
&&
parent
.
icon
!=
'
none
'
)
{
proxyData
.
iconStyle
[
'
background-image
'
]
=
'
url(
'
+
parent
.
icon
+
'
)
'
;
proxyData
.
classDirection
=
parent
.
props
.
expandIconPosition
;
if
(
parent
.
props
.
icon
&&
parent
.
props
.
icon
!=
'
none
'
)
{
proxyData
.
iconStyle
[
'
background-image
'
]
=
'
url(
'
+
parent
.
props
.
icon
+
'
)
'
;
}
if
(
parent
.
iconWidth
&&
parent
.
icon
!=
'
none
'
)
{
proxyData
.
iconStyle
[
'
width
'
]
=
parent
.
conWidth
;
if
(
parent
.
props
.
iconWidth
&&
parent
.
props
.
icon
!=
'
none
'
)
{
proxyData
.
iconStyle
[
'
width
'
]
=
parent
.
props
.
conWidth
;
}
if
(
parent
.
iconHeght
&&
parent
.
icon
!=
'
none
'
)
{
proxyData
.
iconStyle
[
'
height
'
]
=
parent
.
iconHeight
;
if
(
parent
.
props
.
iconHeght
&&
parent
.
props
.
icon
!=
'
none
'
)
{
proxyData
.
iconStyle
[
'
height
'
]
=
parent
.
props
.
iconHeight
;
}
});
return
{
classes
,
...
toRefs
(
proxyData
),
...
toRefs
(
parent
),
...
toRefs
(
parent
.
props
),
...
toRefs
(
titleIconStyle
),
wrapperRef
,
contentRef
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录