PageCard 分页卡片

PageCard 组件是一个快速构建卡片的组件，因内置分页功能从而取名 PageCard。Teek 使用该组件构建了首页的右侧卡片区域。

基础用法

卡片

• name1
• name2
• name3
• name4

<script setup lang="ts">
import { TkPageCard } from "vitepress-theme-teek";

const list = ["name1", "name2", "name3", "name4"];
</script>

<template>
  <TkPageCard title="卡片">
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </TkPageCard>
</template>

隐藏源代码

标题点击

传入 titleLink 或 titleClick 来支持标题的点击。

点击我

• name1
• name2
• name3
• name4

点击我跳转

• name1
• name2
• name3
• name4

<script setup lang="ts">
import { TkPageCard, TkMessage } from "vitepress-theme-teek";

const list = ["name1", "name2", "name3", "name4"];

const handleClick = () => {
  TkMessage.info("点击了卡片标题");
};
</script>

<template>
  <div class="demo-home-card-container">
    <TkPageCard title="点击我" :titleClick="handleClick">
      <ul>
        <li v-for="item in list" :key="item">{{ item }}</li>
      </ul>
    </TkPageCard>

    <TkPageCard title="点击我跳转" titleLink="http://vp.teek.top">
      <ul>
        <li v-for="item in list" :key="item">{{ item }}</li>
      </ul>
    </TkPageCard>
  </div>
</template>

<style lang="scss" scoped>
.demo-home-card-container {
  display: flex;
  gap: 10px;
}
</style>

隐藏源代码

分页功能

传入 page 来实现分页功能，如果想自动翻页，则传入 autoPage 为 true。

分页功能

• name1
• name2
• name3
• name4

分页和动画

• name1
• name2
• name3
• name4

<script setup lang="ts">
import { TkPageCard } from "vitepress-theme-teek";
import { computed, ref } from "vue";

const pageNum = ref(1);
const limit = 4;

const list = ["name1", "name2", "name3", "name4", "name5", "name6", "name7", "name8"];

const currentList = computed(() => list.slice((pageNum.value - 1) * limit, pageNum.value * limit));

const itemRefs = ref<HTMLLIElement[]>([]);
</script>

<template>
  <div class="demo-home-card-container">
    <TkPageCard v-model="pageNum" title="分页功能" page :pageSize="limit" :total="list.length">
      <ul>
        <li v-for="item in currentList" :key="item">{{ item }}</li>
      </ul>
    </TkPageCard>

    <TkPageCard v-model="pageNum" title="分页和动画" page :pageSize="limit" :total="list.length">
      <template #default="{ transitionName }">
        <TransitionGroup :name="transitionName" tag="ul" mode="out-in">
          <li
            ref="itemRefs"
            v-for="(item, index) in currentList"
            :key="item"
            :style="`top: ${index * itemRefs?.[index]?.getBoundingClientRect().height || 0}px`"
          >
            {{ item }}
          </li>
        </TransitionGroup>
      </template>
    </TkPageCard>
  </div>
</template>

<style lang="scss" scoped>
.demo-home-card-container {
  display: flex;
  gap: 10px;

  ul {
    position: relative;

    li {
      margin-top: 0;
    }
  }
}
</style>

隐藏源代码

API

配置项

事件名	说明	类型	默认值
title	标题	string	—
titleLink	标题链接，如果是 http/https 等协议带头，则打开新窗口跳转，否则在当前窗口跳转	string	—
titleClick	标题点击事件，优先级低于 titleLink	() => void	—
page	是否开启分页功能	boolean	false
pageSize	每页显示数量	number	4
total	数量	number	0
autoPage	是否开启自动分页	boolean	false
pageSpeed	翻页间隔事件，单位毫秒，仅当 autoPage 为 true 生效	number	400

插槽

插槽名	说明
default	自定义主内容
title	自定义标题内容
page	自定义分页区内容
page-left	自定义分页左侧按钮
page-right	自定义分页右侧按钮