Hooks

Teek 提供了 Hooks 函数，提高开发效率。

useAnchorScroll

监听浏览器滚动，当滚动到锚点，自动在 URL 后面添加锚点信息。

import { useAnchorScroll } from "vitepress-theme-teek";

const { startWatch } = useAnchorScroll();

startWatch(); // 开始监听

useBuSunZi

使用不蒜子统计网站访问量。

import { useBuSunZi } from "vitepress-theme-teek";

/**
 * 使用不蒜子统计网站访问量
 *
 * @param initRequest 是否初始化请求，即自动执行一次 request，类型 boolean
 * @param iteration 如果请求不蒜子接口失败，是否重试，重试 5 次后依然失败，则不再重试，类型 boolean
 * @param iterationTime 每次重试的时间，单位毫秒，类型 number
 *
 * @returnParam sitePv 网站总访问量，类型 number
 * @returnParam siteUv 网站总访客数，类型 number
 * @returnParam pagePv 当前页面访问量，类型 number
 * @returnParam isGet 是否已经获取过数据，类型 boolean
 * @returnParam request 请求不蒜子函数，类型 Function
 */
const { sitePv, siteUv, pagePv, isGet, request } = useBuSunZi(true, false, 2000);

useClipboard

复制文本到剪贴板。

import { useClipboard } from "vitepress-theme-teek";

/**
 * 复制文本到剪贴板
 *
 * @returnParam copy 复制文本到剪贴板，类型 Function
 * @returnParam text 已复制的文本，类型 string
 * @returnParam copied 复制是否成功，类型 boolean
 * @returnParam isSupported 浏览器是否支持复制，类型 boolean
 */
const { copy, text, copied, isSupported } = useClipboard();

if (!isSupported) alert("您的浏览器不支持复制");

copy("Hello World");

if (copied) alert("复制成功，内容为：" + text);
else alert("复制失败");

useDebounce

防抖函数。

import { useDebounce } from "vitepress-theme-teek";

/**
 * 防抖函数
 *
 * @param func 回调函数
 * @param delay 延迟时间
 * @param immediate 是否立即执行，如果为 true，则立即执行回调函数，否则在延迟时间后执行
 */
const handleClick = useDebounce(() => {}, 500, true);

useNamespace

创建一个命名空间，用于创建具有唯一前缀的类名。

import { useNamespace } from "vitepress-theme-teek";

/**
 * 命名空间
 *
 * @param block 块名，类型 string
 * @param namespaceOverrides 命名空间，类型 string
 */
const ns = useNamespace("button", "tk");

ns.b(); // 返回 "tk-button"
ns.e("primary"); // 返回 "tk-button__primary"
ns.m("disabled"); // 返回 "tk-button--disabled"
ns.be("primary", "disabled"); // 返回 "tk-button-primary__disabled"
ns.bm("primary", "disabled"); // 返回 "tk-button-primary--disabled"
ns.em("primary", "disabled"); // 返回 "tk-button__primary--disabled"
ns.bem("primary", "large", "disabled"); // 返回 "tk-button-primary__large--disabled"
ns.is("disabled"); // 返回 "is-disabled"
ns.joinNamespace("select"); // 返回 "tk-select"
ns.cssVar("color"); // 返回 "var(--tk-color)"
ns.cssVarName("color"); // 返回 "--tk-color"

ns.createBem("tk", "button", "primary", "large", "disabled"); // 返回 "tk-button-primary__large--disabled"

useStorage

创建一个用于管理存储的函数，根据传入的存储类型（sessionStorage 或 localStorage）返回相应的操作函数

import { useStorage } from "vitepress-theme-teek";

/**
 * 创建一个用于管理存储的函数，根据传入的存储类型（sessionStorage 或 localStorage）返回相应的操作函数
 *
 * @param type 存储类型，默认为 sessionStorage
 */
const localStorage = useStorage("localStorage");

localStorage.setStorage("key", "value");
localStorage.getStorage("key");
localStorage.removeStorage("key");
localStorage.removeStorages(["key1", "key2"]);
localStorage.clear(["key"]); // 清空除了 key 的其他所有数据

存储格式：

{
  "_type": "", // 存储值的类型，如 String、Number 等
  "value": "" // 存储的值
}

useScrollData

定时对数据进行截取，实现滚动。

import { useScrollData } from "vitepress-theme-teek";
import { onMounted, onUnmounted } from "vue";

const data = [
  { name: "张三", age: 18 },
  { name: "李四", age: 19 },
  { name: "王五", age: 20 },
  { name: "赵六", age: 21 },
  { name: "钱七", age: 22 },
  { name: "孙八", age: 23 },
  { name: "周九", age: 24 },
];

/**
 * 定时对数据进行截取，实现滚动
 *
 * @param list 数据
 * @param limit 显示数量
 * @param intervalTime 自动滚动间隔时间
 *
 * @returnParam visibleData 显示的数据，类型 Array
 * @returnParam startAutoScroll 开始自动滚动，类型 Function
 * @returnParam stopAutoScroll 停止自动滚动，类型 Function
 */
const { visibleData, startAutoScroll, stopAutoScroll } = useScrollData(data, 5, 3000);

onMounted(() => {
  startAutoScroll();
});

onUnmounted(() => {
  stopAutoScroll();
});

useSwitchData

从数据列表里按顺序/随机获取一笔数据。

import { useSwitchData } from "vitepress-theme-teek";
import { onMounted, onUnmounted } from "vue";

const dataArray = ["./img1.png", "./img2.png", "./img3.png"];

/**
 * 从数据列表里按顺序/随机获取一笔数据
 *
 * @param dataArray 数据列表，类型 Array<string>
 * @param option 配置项
 *
 * @returnParam data 当前数据，类型 Ref<string>
 * @returnParam index 当前数据的索引，类型 Ref<number>
 * @returnParam startAutoSwitch 开始自动切换数据，类型 Function
 * @returnParam stopAutoSwitch 停止自动切换数据，类型 Function
 */
const { data, index, startAutoSwitch, stopAutoSwitch } = useSwitchData(dataArray, {} /* option */);

onMounted(() => {
  startAutoSwitch();
});

onUnmounted(() => {
  stopAutoSwitch();
});

option 类型：

interface DataSwitchOption {
  /**
   * 切换间隔时间，单位：毫秒
   */
  timeout?: number;
  /**
   * 是否随机切换数据
   */
  shuffle?: boolean;
  /**
   * 切换数据之前执行的回调函数
   */
  onBeforeUpdate?: (newValue: string) => void;
  /**
   * 自定义切换逻辑
   */
  onUpdate?: (data: Ref<string>, newValue: string) => void;
  /**
   * 切换数据之后执行的回调函数
   */
  onAfterUpdate?: (newValue: string) => void;
}

useTextTypes

打字功能

import { useTextTypes } from "vitepress-theme-teek";
import { onMounted, onUnmounted } from "vue";

const textArray = ["Hello Teek!", "Hello Vitepress!", "Hello World!"];

/**
 * 打字功能
 * @param textArray 打字数组
 * @param option 打字配置项
 *
 * @returnParam text 当前打字内容
 * @returnParam isFinished 打字是否结束
 * @returnParam start 开始打字
 * @returnParam stop 停止打字
 */
const { text, isFinished, start, stop } = useTextTypes(textArray, {} /* option */);

onMounted(() => {
  start();
});

onUnmounted(() => {
  stop();
});

option 类型：

interface TypesOption {
  /**
   * 打字间隔时间，单位：毫秒
   */
  typesInTime?: number;
  /**
   * 删字间隔时间，单位：毫秒
   */
  typesOutTime?: number;
  /**
   * 换行间隔时间，单位：毫秒
   */
  typesNextTime?: number;
  /**
   * 是否随机切换文本
   */
  shuffle?: boolean;
}

useWindowSize

实时获取窗口大小。

import { useWindowSize } from "vitepress-theme-teek";
import { watch } from "vue";

// 使用方式 1：watch 监听
const { width, height } = useWindowSize();

watch(width, newValue => {});
watch(height, newValue => {});

// 使用方式 2：函数回调监听
useWindowSize((width, height) => {});

useViewTransition

使用暗色、浅色切换的过渡动画。

import { useViewTransition } from "vitepress-theme-teek";

useViewTransition();

需要引入 CSS 来实现过渡动画：

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root),
.dark::view-transition-new(root) {
  z-index: 1;
}

::view-transition-new(root),
.dark::view-transition-old(root) {
  z-index: 9999;
}

useVpRouter

绑定自定义函数到 Router 的钩子里，为了防止覆盖掉其他人已添加在 Router 钩子的逻辑，useVpRouter 不是直接覆盖，而是追加。

import { useVpRouter } from "vitepress-theme-teek";

/**
 * 绑定自定义函数到 Router 的钩子里
 *
 * @returnParam router Vue Router 实例
 * @returnParam route Vue Router 路由实例
 * @returnParam bindBeforeRouteChange 绑定自定义函数到  onBeforeRouteChange 钩子
 * @returnParam bindBeforePageLoad 绑定自定义函数到  onBeforePageLoad 钩子
 * @returnParam bindAfterPageLoad 绑定自定义函数到  onAfterPageLoad 钩子
 * @returnParam bindAfterRouteChange 绑定自定义函数到 onAfterRouteChange 钩子
 * @returnParam bindRouterFn 自定义绑定逻辑
 */
const {
  router,
  route,
  bindBeforeRouteChange,
  bindBeforePageLoad,
  bindAfterPageLoad,
  bindAfterRouteChange,
  bindRouterFn,
} = useVpRouter();

/**
 * 绑定自定义函数到  onBeforeRouteChange 钩子
 *
 * @param stateFlag 为了防止重复添加，useVpRouter 会在 Router 中添加一个 state 对象，里面维护各个绑定自定义函数的唯一标识，防止重复绑定。
 * @remark 什么时候重复添加？当 useVpRouter 在某个组件使用，且组件会重新渲染时，如 404 组件。
 *
 * @param bindFn 要绑定的自定义函数
 * @param bindPosition 绑定的位置，before 为在原函数之前绑定，after 为在原函数之后绑定
 */
bindBeforeRouteChange("permalink", () => {}, "after");