index.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <uni-collapse>
        <uni-collapse-item
          v-for="menu in menus"
          :key="menu.id"
          :title="menu.name"
          class="menu">
          <view v-for="(page, index) in menu.pages" :key="page.name">
            <view
              v-if="page.url"
              class="page-item"
              :class="{ 'first-child': index == 0 }"
              @click="goDetailPage(menu.id, page)">
              <text
                :class="{ 'text-disabled': page.enable == false }"
                class="text"
                >{{ page.name }}</text
              >
            </view>
            <template v-if="page.children">
              <uni-collapse style="flex: 1">
                <uni-collapse-item :title="page.name" class="menu">
                  <view
                    v-for="(child, index) in page.children"
                    :key="`${child.id}-${index}`">
                    <view
                      v-if="child.url"
                      class="page-item"
                      :class="{ 'first-child': index == 0 }"
                      @click="goDetailPage(`${menu.id}/${page.id}`, child)">
                      <text
                        :class="{ 'text-disabled': child.enable == false }"
                        class="text"
                        >{{ child.name }}</text
                      >
                    </view>
                    <template v-else>
                      <uni-collapse style="flex: 1">
                        <uni-collapse-item :title="child.name" class="menu">
                          <view
                            v-for="(childChild, index) in child.children"
                            :key="`${childChild.id}-${index}`">
                            <view
                              class="page-item"
                              :class="{ 'first-child': index == 0 }"
                              @click="
                                goDetailPage(
                                  `${menu.id}/${page.id}/${child.id}`,
                                  childChild
                                )
                              ">
                              <text
                                :class="{
                                  'text-disabled': childChild.enable == false,
                                }"
                                class="text"
                                >{{ childChild.name }}</text
                              >
                            </view>
                          </view>
                        </uni-collapse-item>
                      </uni-collapse>
                    </template>
                  </view>
                </uni-collapse-item>
              </uni-collapse>
            </template>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
import { setLifeCycleNum, state } from '@/store/index.uts'

type Page = {
  id: string
  name: string
  enable?: boolean
  url?: string
  children?: Page[]
}

type Menu = {
  id: string
  name: string
  pages: Page[]
  url?: string
  enable?: boolean
}

export default {
  data() {
    return {
      menus: [
        {
          id: 'app-instance',
          name: 'App 实例',
          pages: [
            {
              id: 'component',
              name: 'component',
              url: 'component/component'
            },
            {
              id: 'globalProperties',
              name: 'globalProperties',
              children: [
                {
                  id: 'globalProperties-options',
                  name: 'globalProperties  选项式 API',
                  url: 'globalProperties-options'
                },
                {
                  id: 'globalProperties-composition',
                  name: 'globalProperties 组合式 API',
                  url: 'globalProperties-composition'
                }
              ]
            },
            {
              id: 'use',
              name: 'use',
              children: [
                {
                  id: 'use-options',
                  name: 'use 选项式 API',
                  url: 'use-composition'
                },
                {
                  id: 'use-composition',
                  name: 'use 组合式 API',
                  url: 'use-composition'
                }
              ]
            }
          ] as Page[]
        },
        {
          id: 'component-instance',
          name: '组件实例',
          pages: [
            {
              id: 'attrs',
              name: 'attrs',
              children: [
                {
                  id: 'attrs-options',
                  name: 'attrs 选项式 API',
                  url: 'attrs-options'
                },
                {
                  id: 'attrs-composition',
                  name: 'attrs 组合式 API',
                  url: 'attrs-composition'
                }
              ]
            },
            {
              id: 'data',
              name: 'data',
              children: [
                {
                  id: 'data-options',
                  name: 'data 选项式 API',
                  url: 'data-options'
                },
                {
                  id: 'data-composition',
                  name: 'data 组合式 API',
                  url: 'data-composition'
                }
              ]
            },
            {
              id: 'props',
              name: 'props',
              children: [
                {
                  id: 'props-options',
                  name: 'props 选项式 API',
                  url: 'props-options'
                },
                {
                  id: 'props-composition',
                  name: 'props 组合式 API',
                  url: 'props-composition'
                }
              ]
            },
            {
              id: 'el',
              name: '$el',
              children: [
                {
                  id: 'el-options',
                  name: '$el 选项式 API',
                  url: 'el-options'
                },
                {
                  id: 'el-composition',
                  name: '$el 组合式 API',
                  url: 'el-composition'
                }
              ]
            },
            {
              id: 'options',
              name: '$options',
              children: [
                {
                  id: 'options-options',
                  name: '$options 选项式 API',
                  url: 'options-options'
                },
                {
                  id: 'options-composition',
                  name: '$options 组合式 API',
                  url: 'options-composition'
                }
              ]
            },
            {
              id: 'parent',
              name: '$parent',
              children: [
                {
                  id: 'parent-options',
                  name: '$parent 选项式 API',
                  url: 'parent-options'
                },
                {
                  id: 'parent-composition',
                  name: '$parent 组合式 API',
                  url: 'parent-composition'
                }
              ]
            },
            // #ifdef APP
            {
              id: 'root',
              name: '$root',
              children: [
                {
                  id: 'root-options',
                  name: '$root 选项式 API',
                  url: 'root-options'
                },
                {
                  id: 'root-composition',
                  name: '$root 组合式 API',
                  url: 'root-composition'
                }
              ]
            },
            // #endif
            {
              id: 'slots',
              name: '$slots',
              children: [
                {
                  id: 'slots-options',
                  name: '$slots 选项式 API',
                  url: 'slots-options'
                },
                {
                  id: 'slots-composition',
                  name: '$slots 组合式 API',
                  url: 'slots-composition'
                }
              ]
            },
            {
              id: 'refs',
              name: '$refs',
              children: [
                {
                  id: 'refs-options',
                  name: '$refs 选项式 API',
                  url: 'refs-options'
                },
                {
                  id: 'refs-composition',
                  name: '$refs 组合式 API',
                  url: 'refs-composition'
                }
              ]
            },
            {
              id: 'emit-function',
              name: '$emit',
              children: [
                {
                  id: 'emit-options',
                  name: '$emit 选项式 API',
                  url: 'emit-function-options'
                },
                {
                  id: 'emit-composition',
                  name: 'defineEmits 组合式 API',
                  url: 'emit-function-composition'
                }
              ]
            },
            {
              id: 'force-update',
              name: '$force-update',
              children: [
                {
                  id: 'force-update-options',
                  name: '$forceUpdate 选项式 API',
                  url: 'force-update-options'
                },
                {
                  id: 'force-update-composition',
                  name: '$forceUpdate 组合式 API',
                  url: 'force-update-composition'
                }
              ]
            },
            {
              id: 'methods',
              name: '$methods',
              children: [
                {
                  id: 'call-method-easycom-uni-modules-options',
                  name: '调用 uni_modules easycom 组件方法 选项式 API',
                  url: 'call-method-easycom-uni-modules-options'
                },
                {
                  id: 'call-method-easycom-uni-modules-composition',
                  name: '调用 uni_modules easycom 组件方法 组合式 API',
                  url: 'call-method-easycom-uni-modules-composition'
                },
                {
                  id: 'call-method-uni-element-options',
                  name: '调用内置组件方法 选项式 API',
                  url: 'call-method-uni-element-options'
                },
                {
                  id: 'call-method-uni-element-composition',
                  name: '调用内置组件方法 组合式 API',
                  url: 'call-method-uni-element-composition'
                },
                {
                  id: 'call-method-other-options',
                  name: '调用自定义组件方法 选项式 API',
                  url: 'call-method-other-options'
                },
                {
                  id: 'call-method-other-composition',
                  name: '调用自定义组件方法 组合式 API',
                  url: 'call-method-other-composition'
                }
              ]
            },
            {
              id: 'provide',
              name: 'provide',
              children: [
                {
                  id: 'provide-options-1',
                  name: 'provide 选项式 API 字面量方式',
                  url: 'provide-options-1'
                },
                {
                  id: 'provide-options-2',
                  name: 'provide 选项式 API 函数方式',
                  url: 'provide-options-2'
                },
                {
                  id: 'provide-composition',
                  name: 'provide 组合式 API',
                  url: 'provide-composition'
                },
              ]
            },
            {
              id: 'nextTick',
              name: 'nextTick',
              children: [
                {
                  id: 'nextTick-options',
                  name: 'nextTick 选项式 API',
                  url: 'nextTick-options'
                },
                {
                  id: 'nextTick-composition',
                  name: 'nextTick 组合式 API',
                  url: 'nextTick-composition'
                },
              ]
            },
            {
              id: 'setup-function',
              name: 'setup()',
              url: 'setup-function/setup-function'
            },
            {
              id: 'define-expose',
              name: 'defineExpose',
              url: 'define-expose/define-expose'
            },
            {
              id: 'circular-reference',
              name: 'circular reference',
              children: [
                {
                  id: 'circular-reference-options',
                  name: '循环引用 选项式 API',
                  url: 'circular-reference-options'
                },
                {
                  id: 'circular-reference-composition',
                  name: '循环引用 组合式 API',
                  url: 'circular-reference-composition'
                },
              ]
            },
            {
              id: 'mixins',
              name: 'mixins',
              children: [
                // #ifdef APP
                {
                  id: 'mixins-app',
                  name: 'mixins',
                  url: 'mixins-app'
                },
                {
                  id: 'mixins-app-page-namesake',
                  name: 'mixins page namesake',
                  url: 'mixins-app-page-namesake'
                },
                // #endif
                // #ifdef WEB
                {
                  id: 'mixins-web',
                  name: 'mixins',
                  url: 'mixins-web'
                },
                // #endif
              ]
            }
          ] as Page[]
        },
        {
          id: 'reactivity',
          name: '响应式',
          pages: [
            {
              id: 'core',
              name: '核心',
              children: [
                {
                  id: 'ref',
                  name: 'ref',
                  url: 'ref/ref'
                },
                {
                  id: 'computed',
                  name: 'computed',
                  children: [
                    {
                      id: 'computed-options',
                      name: 'computed 选项式 API',
                      url: 'computed-options'
                    },
                    {
                      id: 'computed-composition',
                      name: 'computed 组合式 API',
                      url: 'computed-composition'
                    },
                  ]
                },
                {
                  id: 'reactive',
                  name: 'reactive',
                  url: 'reactive/reactive'
                },
                {
                  id: 'readonly',
                  name: 'readonly',
                  url: 'readonly/readonly'
                },
                {
                  id: 'watch',
                  name: 'watch',
                  children: [
                    {
                      id: 'watch-options',
                      name: 'watch 选项式 API',
                      url: 'watch-options'
                    },
                    {
                      id: 'watch-composition',
                      name: 'watch 组合式 API',
                      url: 'watch-composition'
                    },
                  ]
                },
                {
                  id: 'watch-effect',
                  name: 'watchEffect',
                  url: 'watch-effect/watch-effect'
                },
                {
                  id: 'watch-post-effect',
                  name: 'watchPostEffect',
                  url: 'watch-post-effect/watch-post-effect'
                },
                {
                  id: 'watch-sync-effect',
                  name: 'watchSyncEffect',
                  url: 'watch-sync-effect/watch-sync-effect'
                },
              ]
            },
            {
              id: 'utilities',
              name: '工具',
              children: [
                {
                  id: 'is-proxy',
                  name: 'isProxy',
                  url: 'is-proxy/is-proxy'
                },
              ]
            }
          ] as Page[]
        },
        {
          id: 'lifecycle',
          name: '生命周期',
          pages: [
            {
              id: 'page',
              name: '页面生命周期',
              children: [
                {
                  id: 'page-options',
                  name: '页面生命周期 选项式 API',
                  url: 'page-options'
                },

                {
                  id: 'page-composition',
                  name: '页面生命周期 组合式 API',
                  url: 'page-composition'
                }
              ]
            }, {
              id: 'component',
              name: '组件生命周期',
              children: [
                {
                  id: 'component-options',
                  name: '组件生命周期 选项式 API',
                  url: 'component-options'
                },

                {
                  id: 'component-composition',
                  name: '组件生命周期 组合式 API',
                  url: 'component-composition'
                }
              ]
            }
          ] as Page[]
        },
        {
          id: 'built-in',
          name: '内置组件',
          pages: [
            {
              id: 'component/keep-alive',
              name: 'keep-alive',
              children: [
                {
                  id: 'keep-alive-options',
                  name: 'keep-alive 选项式 API',
                  url: 'keep-alive-options'
                },

                {
                  id: 'keep-alive-composition',
                  name: 'keep-alive 组合式 API',
                  url: 'keep-alive-composition'
                }
              ]
            },
            {
              id: 'component/teleport',
              name: 'teleport',
              children: [
                {
                  id: 'teleport-options',
                  name: 'teleport 选项式 API',
                  url: 'teleport-options'
                },

                {
                  id: 'teleport-composition',
                  name: 'teleport 组合式 API',
                  url: 'teleport-composition'
                }
              ]
            },
            {
              id: 'component/component',
              name: 'component',
              children: [
                {
                  id: 'component-options',
                  name: 'component 选项式 API',
                  url: 'component-options'
                },

                {
                  id: 'component-composition',
                  name: 'component 组合式 API',
                  url: 'component-composition'
                }
              ]
            },
            {
              id: 'component/slots',
              name: 'slot',
              children: [
                {
                  id: 'slots-options',
                  name: 'slots 选项式 API',
                  url: 'slots-options'
                },

                {
                  id: 'slots-composition',
                  name: 'slots 组合式 API',
                  url: 'slots-composition'
                }
              ]
            },
            {
              id: 'component/template',
              name: 'template',
              children: [
                {
                  id: 'template-options',
                  name: 'template 选项式 API',
                  url: 'template-options'
                },

                {
                  id: 'template-composition',
                  name: 'template 组合式 API',
                  url: 'template-composition'
                }
              ]
            }
          ] as Page[]
        },
        {
          id: 'rendering',
          name: '渲染',
          pages: [
            {
              id: 'render',
              name: 'render Function 选项式 API',
              url: 'render/render'
            },
            {
              id: 'unrecognized-component',
              name: 'unrecognized-component',
              url: 'unrecognized-component/unrecognized-component'
            }
          ] as Page[]
        },
        {
          id: 'examples',
          name: '示例',
          pages: [
            {
              id: 'nested-component-communication',
              name: '嵌套组件通讯',
              children: [
                {
                  id: 'nested-component-communication-options',
                  name: '选项式',
                  url: 'nested-component-communication-options'
                },
                {
                  id: 'nested-component-communication-composition',
                  name: '组合式',
                  url: 'nested-component-communication-composition'
                }
              ]
            },
            {
              id: 'set-custom-child-component-root-node-class',
              name: '自定义组件中使用 class 定制另一个自定义组件根节点样式',
              children: [
                {
                  id: 'set-custom-child-component-root-node-class-options',
                  name: '选项式',
                  url: 'set-custom-child-component-root-node-class-options'
                },
                {
                  id: 'set-custom-child-component-root-node-class-composition',
                  name: '组合式',
                  url: 'set-custom-child-component-root-node-class-composition'
                }
              ]
            }
          ] as Page[]
        }
      ] as Menu[]
    }
  },
  methods: {
    goDetailPage(parentUrl: string, page: Page) {
      if (page.enable == false) {
        uni.showToast({
          icon: 'none',
          title: '暂不支持'
        })
        return
      }
      uni.navigateTo({
        url: `/pages/${parentUrl}/${page.url}`
      })
    },
    // 自动化测试
    setLifeCycleNum(num: number) {
      setLifeCycleNum(num)
    },
    // 自动化测试
    getLifeCycleNum(): number {
      return state.lifeCycleNum
    },
    // 自动化测试
    checkLaunchPath(): boolean {
      const app = getApp()
      return app.checkLaunchPath()
    }
  }
}
</script>

<style lang="scss">
.menu {
  border-bottom: 1px solid #dbd9d9;

  &.open {
    border-bottom: none;
  }
}

.page-item {
  padding: 12px 10px;
  border-bottom: 1px solid #dbd9d9;

  &.first-child {
    border-top: 1px solid #dbd9d9;
  }

  .text {
    font-size: 14px;
    color: #333;

    &.text-disabled {
      color: #999;
    }
  }
}
</style>