更新记录

0.0.2（2024-04-22）

• 暗黑模式

0.0.1（2024-04-22）

• alpha

平台兼容性

折叠面板

• 组件名 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>

属性

icon

方法

• 展开或折叠当前项 collapse(open: boolean) : void {}

变量

• 详见语雀文档