72 lines
1.7 KiB
Markdown
72 lines
1.7 KiB
Markdown
# 与星网项目相关
|
|
|
|
---
|
|
* TabList用法
|
|
```html
|
|
<TabList v-model:value="activeTabName" :tabs="tabs"></TabList>
|
|
```
|
|
导入
|
|
```ts
|
|
import TabList from '@/components/tabList.vue'
|
|
```
|
|
其中tabs的格式如下
|
|
```ts
|
|
const tabs = ref([
|
|
{
|
|
label: '教师作品',
|
|
value: 'teacherWorks'
|
|
}
|
|
])
|
|
```
|
|
作用为生成一个标签页
|
|
|
|
---
|
|
|
|
* ScrollLoad用法
|
|
```html
|
|
<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的参数为如下
|
|
```ts
|
|
const scrollLoadProps = computed(() => {
|
|
return {
|
|
apiConf: api.something,
|
|
matchData: '@data.items@',
|
|
params: {}
|
|
}
|
|
})
|
|
```
|
|
具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）
|
|
|
|
---
|
|
# 接口使用相关
|