Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
F
first-ui
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
open
first-ui
Commits
5b1b43d9
提交
5b1b43d9
authored
7月 28, 2022
作者:
方治民
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: fui-collapse 支持嵌套
上级
d816b05c
隐藏空白字符变更
内嵌
并排
正在显示
2 个修改的文件
包含
80 行增加
和
35 行删除
+80
-35
fui-collapse-item.vue
...omponents/firstui/fui-collapse-item/fui-collapse-item.vue
+59
-34
collapse.vue
FirstUI-uniapp/pages/component/data/collapse/collapse.vue
+21
-1
没有找到文件。
FirstUI-uniapp/components/firstui/fui-collapse-item/fui-collapse-item.vue
浏览文件 @
5b1b43d9
...
...
@@ -104,6 +104,21 @@
watch
:
{
open
(
val
)
{
this
.
isOpen
=
val
},
isOpen
(
val
)
{
this
.
$nextTick
(
async
()
=>
{
let
parent
=
this
.
$parent
;
let
parentName
=
parent
.
$options
.
name
;
while
(
parentName
!==
'PageBody'
)
{
if
(
parentName
===
'fui-collapse-item'
)
{
await
parent
.
init
()
}
parent
=
parent
.
$parent
;
if
(
!
parent
)
return
false
;
parentName
=
parent
.
$options
.
name
;
}
})
}
},
updated
(
e
)
{
...
...
@@ -136,12 +151,14 @@
},
methods
:
{
init
()
{
const
promise
=
[]
// #ifndef APP-NVUE
this
.
getCollapseHeight
(
)
promise
.
push
(
this
.
getCollapseHeight
()
)
// #endif
// #ifdef APP-NVUE
this
.
getNvueHeight
(
)
promise
.
push
(
this
.
getNvueHeight
()
)
// #endif
return
Promise
.
all
(
promise
)
},
uninstall
()
{
if
(
this
.
collapse
)
{
...
...
@@ -165,41 +182,49 @@
}
},
getCollapseHeight
(
index
=
0
)
{
uni
.
createSelectorQuery
()
// #ifndef MP-ALIPAY
.
in
(
this
)
// #endif
.
select
(
`#
${
this
.
elId
}
`
)
.
fields
({
size
:
true
},
data
=>
{
if
(
index
>=
10
)
return
if
(
!
data
)
{
index
++
this
.
getCollapseHeight
(
index
)
return
}
// #ifdef APP-NVUE
this
.
height
=
data
.
height
+
1
// #endif
// #ifndef APP-NVUE
this
.
height
=
data
.
height
return
new
Promise
((
resolve
)
=>
{
uni
.
createSelectorQuery
()
// #ifndef MP-ALIPAY
.
in
(
this
)
// #endif
this
.
isHeight
=
true
})
.
exec
()
.
select
(
`#
${
this
.
elId
}
`
)
.
fields
({
size
:
true
},
data
=>
{
if
(
index
>=
10
)
return
if
(
!
data
)
{
index
++
this
.
getCollapseHeight
(
index
)
return
}
// #ifdef APP-NVUE
this
.
height
=
data
.
height
+
1
// #endif
// #ifndef APP-NVUE
this
.
height
=
data
.
height
// #endif
this
.
isHeight
=
true
resolve
(
this
.
height
)
})
.
exec
()
})
},
getNvueHeight
()
{
const
result
=
dom
.
getComponentRect
(
this
.
$refs
[
'fui_collapse__el'
],
option
=>
{
if
(
option
&&
option
.
result
&&
option
.
size
)
{
// #ifdef APP-NVUE
this
.
height
=
option
.
size
.
height
+
1
// #endif
// #ifndef APP-NVUE
this
.
height
=
option
.
size
.
height
// #endif
this
.
isHeight
=
true
}
return
new
Promise
((
resolve
)
=>
{
const
result
=
dom
.
getComponentRect
(
this
.
$refs
[
'fui_collapse__el'
],
option
=>
{
if
(
option
&&
option
.
result
&&
option
.
size
)
{
// #ifdef APP-NVUE
this
.
height
=
option
.
size
.
height
+
1
// #endif
// #ifndef APP-NVUE
this
.
height
=
option
.
size
.
height
// #endif
this
.
isHeight
=
true
resolve
(
this
.
height
)
}
})
})
},
getCollapse
(
name
=
'fui-collapse'
)
{
...
...
FirstUI-uniapp/pages/component/data/collapse/collapse.vue
浏览文件 @
5b1b43d9
...
...
@@ -8,13 +8,33 @@
<view
class=
"fui-page__bd"
>
<view
class=
"fui-section__title"
>
基础使用
</view>
<!--fui-collapse-item可单独使用 @change事件仅无父组件fui-collapse时生效-->
<fui-collapse-item
@
change=
"change"
>
<fui-collapse-item
@
change=
"change"
:animation=
"false"
>
<view
class=
"fui-item__box"
>
<image
src=
"/static/images/common/logo.png"
class=
"fui-logo"
></image>
<text>
First UI
</text>
</view>
<template
v-slot:content
>
<view
class=
"fui-descr"
>
First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。
</view>
<fui-collapse-item
@
change=
"change"
:animation=
"false"
>
<view
class=
"fui-item__box"
>
<image
src=
"/static/images/common/logo.png"
class=
"fui-logo"
></image>
<text>
First UI2
</text>
</view>
<template
v-slot:content
>
<view
class=
"fui-descr"
>
First UI2 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。
</view>
<fui-collapse-item
@
change=
"change"
:animation=
"false"
>
<view
class=
"fui-item__box"
>
<image
src=
"/static/images/common/logo.png"
class=
"fui-logo"
></image>
<text>
First UI3
</text>
</view>
<template
v-slot:content
>
<view
class=
"fui-descr"
>
First UI3 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。
</view>
</
template
>
</fui-collapse-item>
</template>
</fui-collapse-item>
</template>
</fui-collapse-item>
<view
class=
"fui-section__title"
>
默认展开
</view>
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论