API.uvue 5.0 KB
Newer Older
DCloud-WZF's avatar
DCloud-WZF 已提交
1 2
<template>
  <!-- #ifdef APP -->
3
  <scroll-view style="flex: 1;" enable-back-to-top="true">
DCloud-WZF's avatar
DCloud-WZF 已提交
4 5
  <!-- #endif -->
    <view class="uni-container">
6
      <view v-if="!hasLeftWin" class="uni-header-logo">
DCloud-WZF's avatar
DCloud-WZF 已提交
7 8
        <image class="uni-header-image" src="/static/apiIndex.png"></image>
      </view>
9
      <view v-if="!hasLeftWin" class="uni-text-box">
DCloud-WZF's avatar
DCloud-WZF 已提交
10 11 12 13
        <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>
14
      <uni-collapse>
DCloud-WZF's avatar
DCloud-WZF 已提交
15
        <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem.id" :title="menuItem.name"
16
          class="item">
DCloud-WZF's avatar
DCloud-WZF 已提交
17
          <template v-for="childMenuItem in menuItem.items" :key="childMenuItem.id">
18 19
            <view v-if="childMenuItem.items.length==0" style="padding-left: 18px;"
              :class="{'uni-navigate-item':childMenuItem.path !== 'set-tab-bar' || windowWidth <= 768}"
DCloud-WZF's avatar
DCloud-WZF 已提交
20
              hover-class="is--active" @click="goPage(`/${childMenuItem.path}`)">
21 22
              <template v-if="childMenuItem.path !== 'set-tab-bar' || windowWidth <= 768">
                <text class="uni-navigate-text"
DCloud-WZF's avatar
DCloud-WZF 已提交
23
                  :class="{'left-win-active': leftWinActive === childMenuItem.path && hasLeftWin}">{{ childMenuItem.style["navigationBarTitleText"] }}</text>
24 25
                <image :src="arrowRightIcon" class="uni-icon-size"></image>
              </template>
26 27 28 29 30
            </view>
            <uni-collapse v-else style="width: 100%">
              <uni-collapse-item :title="childMenuItem.name" class="item"
                style="margin-bottom: 0; padding-left: 5px; padding-right: 5px">
                <view style="padding-left: 18px" class="uni-navigate-item" hover-class="is--active"
DCloud-WZF's avatar
DCloud-WZF 已提交
31
                  v-for="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem.path"
32 33 34 35 36 37 38 39 40 41
                  @click="goPage(`/${grandChildMenuItem.path}`)">
                  <text class="uni-navigate-text" :class="{
                      'left-win-active':
                        leftWinActive === grandChildMenuItem.path && hasLeftWin,
                    }">{{ grandChildMenuItem.style["navigationBarTitleText"] }}</text>
                  <image :src="arrowRightIcon" class="uni-icon-size"></image>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </template>
42 43 44
        </uni-collapse-item>
      </uni-collapse>
      <view v-if="!hasLeftWin" ref="pop" @click="hidePop()" class="popup">
雪洛's avatar
雪洛 已提交
45
        <view style="width: 90%; background-color: white" @click.stop="stopClickPop">
46 47 48
          <api-set-tabbar></api-set-tabbar>
        </view>
      </view>
DCloud-WZF's avatar
DCloud-WZF 已提交
49 50 51 52 53 54 55
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
56 57 58
  import { generateMenu } from './generateMenu.uts'
  import { MenuItem } from './generateMenu.uts'
  const menu = generateMenu('pages/API')
59
  import { state } from '@/store/index.uts'
DCloud-WZF's avatar
DCloud-WZF 已提交
60 61 62
  export default {
    data() {
      return {
DCloud-WZF's avatar
DCloud-WZF 已提交
63
        menu: menu as MenuItem[],
DCloud-WZF's avatar
DCloud-WZF 已提交
64 65
        arrowRightIcon: '/static/icons/arrow-right.png',
      }
66 67
    },
    computed: {
68
      hasLeftWin() : boolean {
69 70
        return !state.noMatchLeftWindow
      },
71
      leftWinActive() : string {
72
        return state.leftWinActive.slice(1)
73
      },
74 75
      windowWidth() : number {
        return uni.getWindowInfo().windowWidth
76
      }
DCloud-WZF's avatar
DCloud-WZF 已提交
77 78
    },
    methods: {
79
      goPage(url : string) {
80 81
        if (url == '/set-tab-bar') {
          this.showPop()
82
        }else {
DCloud-WZF's avatar
DCloud-WZF 已提交
83
          if (this.hasLeftWin) {
84 85 86
            uni.reLaunch({ url })
          } else {
            uni.navigateTo({ url })
87
          }
88
        }
89
      },
DCloud-WZF's avatar
DCloud-WZF 已提交
90 91 92 93 94 95 96 97 98
      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的非灰色区域,拦截点击事件
      }
99 100
    },
    // #ifdef WEB
101 102 103 104 105
    watch: {
      $route: {
        immediate: true,
        handler(newRoute) {
          if (newRoute.matched.length) {
106
            const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.items.some(item => this.leftWinActive && this.leftWinActive === item?.path))
107 108 109 110 111
            if (activeCategoryIndex > -1) {
              this.$nextTick(() => {
                ((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
              })
            }
112 113 114
          }
        }
      }
115
    },
116
    // #endif
DCloud-WZF's avatar
DCloud-WZF 已提交
117 118 119 120 121 122 123 124 125 126
  }
</script>

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

  .popup {
    position: fixed;
127 128 129 130
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
DCloud-WZF's avatar
DCloud-WZF 已提交
131 132 133 134 135
    align-items: center;
    justify-content: center;
    display: none;
    background-color: rgba(16, 16, 16, 0.5);
  }
DCloud-WZF's avatar
DCloud-WZF 已提交
136
</style>