文件目录

介绍

文件目录采用列表组件来实现，只不过将文件和目录进行了按照字母进行排序，并且将目录放在最前面。

采用u-sticky对代码路径进行吸顶，方便跳转

仓库代码示例

代码地址pages/repos/code/code.vue

<view :class="darkMode?'custom-dark':'custom-light'" class="w-h-100">
  <u-sticky>
    <view class="u-font-xl text-white" :style="{backgroundColor:themeBgColor}" style="padding: 10rpx 30rpx;">
      <block v-for="(item, index) in pathList" :key="`${item}${index}`">
        <u-icon name="arrow-right" @tap="tapDir(index, item)"></u-icon>
        <text @tap="tapDir(index + 1, item)">{{ item }}</text>
      </block>
    </view>
  </u-sticky>
  <view class="cu-list menu">
    <view class="cu-item" v-for="(item, index) in fileList" :key="`${item.name}${index}`" @tap="tapFileOrDir(item)">
      <view class="content">
        <text :class="[getFileIconClass(item.type), FileIcons.getClassWithColor(item.name)]" class="margin-right-xs u-font-xl file-icon" />
        <text class="u-font-xl">{{ item.name }}</text>
      </view>
    </view>
  </view>
</view>

这里采用file-icons-js插件来进行文件类型图标和颜色展示

效果