更新记录
0.0.2(2024-04-22)
下载此版本
0.0.1(2024-04-22)
下载此版本
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.11,Android:10.0,iOS:不确定,HarmonyOS:不确定 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
折叠面板
- 组件名
nap-collapse-item
- 代码助手
<nap-col
- 语雀文档
组件关系
- 父组件
nap-collapse
- 子组件
nap-collapse-item
- 依赖组件
nap-icons
快速使用
<template>
<scroll-view class="np-flex-1 np-py-12" :style="{ 'background-color': dark ? '#000' : '#f5f6fb' }">
<nap-collapse class="np-mx-32">
<template v-for="(item, index) of list">
<nap-collapse-item class="np-mb-12"
background="cyan"
:title="item.name"
:open="item.open"
:disabled="item.disabled"
:dark="dark">
<view class="np-flex-row np-justify-between np-align-center np-p-24" style="border-top: 1px solid #eee;"
v-for="page of item.pages" @click="itemClick(page)">
<text class="np-font-14" :class="[dark && !page.disabled ? 'np-color-white' : page.disabled ? 'np-color-light' : 'np-color-black']">{{page.name}}</text>
<nap-icons type="right" :size="14" color="#9296AF"></nap-icons>
</view>
</nap-collapse-item>
</template>
</nap-collapse>
</scroll-view>
</template>
<script lang="uts">
type Page = {
name : string,
url ?: string
disabled ?: boolean
}
type ListItem = {
id : string
name : string
url ?: string
disabled ?: boolean
open ?: boolean
pages : Page[]
}
const componentList: ListItem[] = [
{
id: '1',
name: '分组一(默认展开)',
open: true,
pages: [
{
name: '子项1-1',
url: '',
},
{
name: '子项1-2',
url: '',
},
{
name: '子项1-3(禁用)',
url: '',
disabled: true,
},
] as Page[],
},
{
id: '2',
name: '分组二',
pages: [
{
name: '子项2-1',
url: '',
},
{
name: '子项2-2',
url: '',
},
] as Page[],
},
{
id: '3',
name: '分组三(禁用)',
disabled: true,
pages: [
{
name: '子项3-1',
url: '',
},
] as Page[],
},
]
export default {
data() {
return {
list: componentList as ListItem[],
dark: false,
}
},
methods: {
itemClick(e : Page) : void {
e.url && uni.navigateTo({ url: e.url! })
},
},
}
</script>
<style lang="scss">
.text-disabled { color: #999; }
.bg-light { background: #eee; }
</style>
属性
名称 |
类型 |
默认值 |
描述 |
备注 |
title |
string |
- |
折叠项标题 |
- |
background |
string |
- |
折叠项背景颜色 |
暗黑模式下无效 |
open |
boolean |
false |
折叠项是否初始化展开 |
可以多项展开,点击时手风琴效果会覆盖 |
disabled |
boolean |
false |
是否禁用折叠项 |
禁用后不可点击展开 |
icon |
string |
number |
1 |
折叠项图标配置0、1、2 |
值为2时需配置v-slot:icon |
dark |
boolean |
false |
暗黑模式 |
内容区为自定义插槽,该部分暗黑模式自行适配 |
icon
值名称 |
描述 |
0 |
无箭头 |
1 |
默认箭头 |
2 |
自定义图标(自动带旋转动画) |
方法
- 展开或折叠当前项 collapse(open: boolean) : void {}
变量