API.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
  <!-- #endif -->
    <view class="uni-container">
      <view class="uni-header-logo">
        <image class="uni-header-image" src="/static/apiIndex.png"></image>
      </view>
      <view class="uni-text-box">
        <text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
        <u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'"
          :inWhiteList="true"></u-link>
      </view>
     <uni-collapse>
       <uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem!.name"
         class="item">
         <view v-for="page in menuItem!.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
           @click="goPage(`/${page!.path}`)">
           <text class="uni-navigate-text">{{
               page!.style["navigationBarTitleText"]
             }}</text>
           <image :src="arrowRightIcon" class="uni-icon-size"></image>
         </view>
         <uni-collapse style="width: 100%" v-for="childMenu in menuItem!.children" :key="childMenu!.id">
           <uni-collapse-item :title="childMenu!.name" class="item" style="margin-bottom: 0">
             <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu!.pages"
               :key="childPage!.path" @click="goPage(`/${childPage!.path}`)">
               <text class="uni-navigate-text">{{
                   childPage!.style["navigationBarTitleText"]
                 }}</text>
               <image :src="arrowRightIcon" class="uni-icon-size"></image>
             </view>
           </uni-collapse-item>
         </uni-collapse>
       </uni-collapse-item>
     </uni-collapse>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
  <view ref="pop" @click="hidePop()" class="popup">
    <view style="width: 90%; background-color: white" @click="stopClickPop">
      <api-set-tabbar></api-set-tabbar>
    </view>
  </view>
</template>

<script lang="uts">
  import { generateMenu } from './generateMenu.uts'
  import { MenuItem } from './generateMenu.uts'
  const menu = generateMenu('pages/API')
  export default {
    data() {
      return {
        menu: menu as (MenuItem | null)[],
        arrowRightIcon: '/static/icons/arrow-right.png',
      }
    },
    methods: {
      goPage(url : string) {
        if (url == '/set-tab-bar') {
          this.showPop()
        } else {
          uni.navigateTo({ url })
        }
      },
      showPop: function () {
        (this.$refs["pop"] as UniElement).style.setProperty("display", "flex")
      },
      hidePop: function () {
        (this.$refs["pop"] as UniElement).style.setProperty("display", "none")
      },
      stopClickPop: function (e : PointerEvent) {
        e.stopPropagation() //点击到pop的非灰色区域，拦截点击事件
      }
    },
  }
</script>

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

  .popup {
    width: 100%;
    /* #ifdef APP */
    position: absolute;
    height: 100%;
    /* #endif */
    /* #ifndef APP */
    position: fixed;
    top: var(--window-top);
    bottom: var(--window-bottom);
    /* #endif */
    align-items: center;
    justify-content: center;
    display: none;
    background-color: rgba(16, 16, 16, 0.5);
  }
</style>