更新记录

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-my-12">
        <nap-collapse class="np-mx-32">
            <template v-for="item of list">
                <nap-collapse-item :ref="`collapse-${index}`" :title="item.name" :open="item.open" icon="2" class="np-mb-12">
                    <!-- 自定义箭头图标 icon=2  -->
                    <view class="np-flex-row np-justify-between np-align-center np-p-24"
                        style="border-top: 1px solid #f0f0f0;"
                        :hover-class="page.enable ? 'np-color-light' : ''"
                        v-for="page of item.pages" @click="itemClick(page)">
                        <text class="np-color-black np-font-14" :class="{'np-color-light': !page.enable}">{{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
    enable ?: boolean
}
type ListItem = {
    id : string
    name : string
    url ?: string
    enable ?: boolean
    open ?: boolean
    pages : Page[]
}
const componentList: ListItem[] = [
    {
        id: '1',
        name: '分组一（默认展开）',
        open: true,
        pages: [
            {
                name: '子项1-1',
                url: '',
                enable: true,
            },
            {
                name: '子项1-2',
                url: '',
                enable: true,
            },
            {
                name: '子项1-3 禁用',
                url: '',
                enable: false,
            },
        ] as Page[],
    },
    {
        id: '2',
        name: '分组二',
        pages: [
            {
                name: '子项2-1',
                url: '',
                enable: false,
            },
            {
                name: '子项2-2',
                url: '',
                enable: false,
            },
        ] as Page[],
    },
    {
        id: '3',
        name: '分组三',
        enable: false,
        pages: [
            {
                name: '子项3-1',
                url: '',
                enable: false,
            },
        ] as Page[],
    },
]

export default {
    data() {
        return {
            list: componentList as ListItem[],
        }
    },
    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>

属性

方法

• 折叠所有展开项 close() : void {}

变量

• 详见语雀文档