与星网项目相关

TabList用法

<TabList v-model:value="activeTabName" :tabs="tabs"></TabList>

导入

import TabList from '@/components/tabList.vue'

其中tabs的格式如下

const tabs = ref([
  {
    label: '教师作品',
    value: 'teacherWorks'
  }
])

作用为生成一个标签页

ScrollLoad用法

<ScrollLoad
  ref="scrollLoadRef"
  v-bind="scrollLoadProps"
  @fetchEnd="handleScrollDataFetchEnd">
  <!-- 这里直接使用elementplus的组件构建骨架屏 -->
  <template #skeleton>
    <el-skeleton
      :count="11"
      :throttle="500"
      animated
      class="result-skeleton">
      <template #template>
        <el-skeleton-item
          variant="rect"
          class="result-item-skeleton result-item"></el-skeleton-item>
      </template>
    </el-skeleton>
  </template>
  <!-- 这里为懒加载列表的内容，此处data未使用 -->
  <template #default={data}>
    <replayCard
      v-for="data of testData.testData"
      :key="data.title"
      :cardData="data"></replayCard>
  </template>
  <!-- 无数据时显示 -->
  <template #no-data>
    <RemindEmptyResource class="result-no-data"></RemindEmptyResource>
  </template>
</ScrollLoad>

其中scrollLoadProps的参数为如下

const scrollLoadProps = computed(() => {
  return {
    apiConf: api.something,
    matchData: '@data.items@',
    params: {}
  }
})

具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）

1.7 KiB Raw Blame History

与星网项目相关

接口使用相关

1.7 KiB

Raw Blame History