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.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>
                </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
            ] as Page[]
          },
          {
            id: 'lifecycle',
            name: '生命周期',
            pages: [
              {
                id: 'page',
                name: '页面生命周期',
                children: [
                  {
                    id: 'page-options',
                    name: '页面生命周期（选项式）',
                    url: 'page-options',
                  },

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

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

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

                  {
                    id: 'component-composition',
                    name: 'component（组合式）',
                    url: 'component-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>