options-api.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view class="uni-container">
      <uni-collapse>
        <template v-for="item in list" :key="item.id">
          <uni-collapse-item :title="item.name" class="item">
            <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
              v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(item.id, page)">
              <text class="uni-navigate-text"
                :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
            </view>
          </uni-collapse-item>
        </template>
      </uni-collapse>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

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

  type PageItem = {
    name : string
    enable ?: boolean
    url ?: string
  }

  type PageList = {
    id : string
    name : string
    open : boolean
    pages : PageItem[]
    url ?: string
    enable ?: boolean
  }

  export default {
    data() {
      return {
        list: [
          {
            id: 'app-instance',
            name: 'App 实例',
            open: false,
            pages: [
              {
                name: 'index',
                url: 'index',
                enable: true,
              },
              {
                name: 'globalProperties',
                url: 'globalProperties',
                enable: true,
              },
            ] as PageItem[],
          },
          {
            id: 'built-in-component',
            name: '内置组件',
            open: false,
            pages: [
              {
                name: 'keepAlive',
                url: 'keep-alive',
                enable: true,
              },
            ] as PageItem[],
          },
          {
            id: 'lifecycle',
            name: '生命周期',
            open: false,
            pages: [
              {
                name: 'page',
                url: 'page',
                enable: true,
              },
              {
                name: 'component',
                url: 'component',
                enable: true,
              },
            ] as PageItem[],
          },
          {
            id: 'directive',
            name: '指令',
            open: false,
            pages: [
              {
                name: 'v-for',
                url: 'v-for',
                enable: true,
              },
              {
                name: 'v-for-item-click',
                url: 'v-for/v-for-item-click',
                enable: true,
              },
              {
                name: 'v-for-item-v-if',
                url: 'v-for/v-for-item-v-if',
                enable: true,
              },
              {
                name: 'v-for-item-v-show',
                url: 'v-for/v-for-item-v-show',
                enable: true,
              },
              {
                name: 'v-for-v-for',
                url: 'v-for/v-for-v-for',
                enable: true,
              },
              {
                name: 'v-if',
                url: 'v-if',
                enable: true,
              },
              {
                name: 'v-show',
                url: 'v-show',
                enable: true,
              },
              {
                name: 'v-on',
                url: 'v-on',
                enable: true,
              },
              {
                name: 'v-bind',
                url: 'v-bind',
                enable: true,
              },
              {
                name: 'v-bind-class',
                url: 'v-bind/v-bind-class',
                enable: true,
              },
              {
                name: 'v-bind-style',
                url: 'v-bind/v-bind-style',
                enable: true,
              },
              {
                name: 'v-bind-props',
                url: 'v-bind/v-bind-props',
                enable: true,
              },
              {
                name: 'v-bind-attribute',
                url: 'v-bind/v-bind-attribute',
                enable: false,
              },
              {
                name: 'v-model',
                url: 'v-model',
                enable: true,
              },
              {
                name: 'v-slot',
                url: 'v-slot',
                enable: true,
              },
              {
                name: 'v-html',
                url: 'v-html',
                enable: true,
              },
              {
                name: 'v-pre',
                url: 'v-pre',
                enable: true,
              },
              {
                name: 'v-once',
                url: 'v-once',
                // #ifdef APP
                enable: true,
                // #endif
                // #ifdef WEB
                enable: false,
                // #endif
              },
              {
                name: 'v-memo',
                url: 'v-memo',
                // #ifdef APP
                enable: true,
                // #endif
                // #ifdef WEB
                enable: false,
                // #endif
              },
              {
                name: 'v-cloak',
                url: 'v-cloak',
                enable: false,
              },
            ] as PageItem[],
          },
          {
            id: 'state',
            name: '状态',
            open: false,
            pages: [
              {
                name: 'data',
                url: 'data',
                enable: true,
              },
              {
                name: 'props',
                url: 'props',
                enable: true,
              },
              {
                name: 'computed',
                url: 'computed',
                enable: true,
              },
              {
                name: 'methods',
                url: 'methods',
                enable: true,
              },
              {
                name: 'watch',
                url: 'watch',
                enable: true,
              },
            ] as PageItem[],
          },
          {
            id: 'rendering',
            name: '渲染选项',
            open: false,
            pages: [
              {
                name: 'template',
                url: 'template',
                enable: true,
              },
              {
                name: 'render',
                url: 'render',
                // #ifdef APP
                enable: true,
                // #endif
                // #ifdef WEB
                enable: false,
                // #endif
              },
              {
                name: 'slots',
                url: 'slots',
                enable: true,
              },
              {
                name: 'component',
                url: 'component',
                enable: true,
              },
              {
                name: 'unrecognized component',
                url: 'unrecognized-component',
                enable: true,
              },
            ] as PageItem[],
          },
          {
            id: 'component-instance',
            name: '组件实例',
            open: false,
            pages: [
              {
                name: '$data',
                url: 'data',
                enable: true,
              },
              {
                name: '$props',
                url: 'props',
                enable: true,
              },
              {
                name: '$el',
                url: 'el',
                enable: true,
              },
              {
                name: '$options',
                url: 'options',
                enable: true,
              },
              {
                name: '$parent',
                url: 'parent',
                // #ifdef APP
                enable: true,
                // #endif
                // #ifdef WEB
                enable: false,
                // #endif
              },
              {
                name: '$root',
                url: 'root',
                // #ifdef APP
                enable: true,
                // #endif
                // #ifdef WEB
                enable: false,
                // #endif
              },
              {
                name: '$slots',
                url: 'slots',
                enable: true,
              },
              {
                name: '$refs',
                url: 'refs',
                enable: true,
              },
              {
                name: '$attrs',
                url: 'attrs',
                enable: true,
              },
              {
                name: '$watch',
                url: 'watch-function',
                enable: true,
              },
              {
                name: 'watch-array',
                url: 'watch-function/watch-array',
                enable: true,
              },
              {
                name: '$emit',
                url: 'emit-function',
                enable: true,
              },
              {
                name: '$forceUpdate',
                url: 'force-update',
                enable: true,
              },
              {
                name: '$nextTick',
                url: 'nextTick-function',
                enable: true,
              },
              {
                name: 'call-method-uni-element',
                url: 'methods/call-method-uni-element',
                enable: true,
              },
              {
                name: 'call-method-easycom',
                url: 'methods/call-method-easycom',
                enable: true,
              },
              {
                name: 'call-method-easycom-uni-modules',
                url: 'methods/call-method-easycom-uni-modules',
                enable: true,
              },
              {
                name: 'call-method-other',
                url: 'methods/call-method-other',
                enable: true,
              },
              {
                name: 'circular-reference',
                url: 'circular-reference',
                enable: true,
              },
            ] as PageItem[],
          },
          {
            id: 'composition',
            name: '组合选项',
            open: false,
            pages: [
              {
                name: 'provide',
                url: 'provide',
                enable: true,
              },
              {
                name: 'inject',
                url: 'inject',
                enable: true,
              },
              // #ifdef APP
              {
                name: 'mixins',
                url: 'mixins',
                enable: true,
              },
              // #endif
              // #ifdef WEB
              {
                name: 'mixins',
                url: 'mixins/mixins-web',
                enable: true,
              },
              // #endif
              {
                name: 'extends',
                url: 'extends',
                enable: false,
              },
              {
                name: 'setup',
                url: 'setup',
                enable: true,
              }
            ] as PageItem[],
          },
          {
            id: 'examples',
            name: '示例',
            open: false,
            pages: [
              {
                name: '嵌套组件通信',
                url: 'nested-component-communication',
                enable: true,
              }, {
                name: '自定义组件中使用 class 定制另一个自定义组件根节点样式',
                url: 'set-custom-child-component-root-node-class',
                enable: true,
              }
            ] as PageItem[],
          },
        ] as PageList[],
      }
    },
    methods: {
      goDetailPage(id : string, e : PageItem) {
        if (e.enable == false) {
          uni.showToast({
            icon: 'none',
            title: '暂不支持',
          })
          return
        }

        const url = e.url!.includes('/') ? e.url : `${e.url}/${e.url}`
        uni.navigateTo({
          url: `/pages/${id}/${url}`,
        })
      },
      // 自动化测试
      setLifeCycleNum(num : number) {
        setLifeCycleNum(num)
      },
      // 自动化测试
      getLifeCycleNum() : number {
        return state.lifeCycleNum
      },
      // 自动化测试
      checkLaunchPath() : boolean {
        const app = getApp()
        return app.checkLaunchPath()
      },
    },
  }
</script>

<style>
  .item {
    margin-bottom: 12px;
  }
</style>