VitePress

Appearance

常用hooks ​

useBusuanzi ​

给网站、博客文章添加阅读次数统计

vue
<script setup lang="ts">
import { useBusuanzi } from "liyao-vue-common";
const { site_pv, site_uv, page_pv, page_uv } = useBusuanzi();
</script>

<template>
 <div>
    <p>站点访问量: {{ site_pv }}</p>
    <p>站点访客数: {{ site_uv }}</p>
    <p>当前页面访问量: {{ page_pv }}</p>
    <p>当前页面访客数: {{ page_uv }}</p>
 </div>
</template>

useDayDiff ​

计算给定时间的相差天数

typescript
import { useDayDiff } from "liyao-vue-common";
const { diffDays } = useDayDiff("2024-01-01");
console.log(diffDays.value);

useTimeDiff ​

计算给定时间的相差时间(年/月/日/时/分)

typescript
import { useTimeDiff } from "liyao-vue-common";
const { timeDiff   } = useTimeDiff("2024-01-01");
console.log(timeDiff  .value);

useFileDownloader ​

下载Base64及Blob文件

typescript
import { useFileDownloader } from "liyao-vue-common";

const { base64ToFile, blobToFile } = useFileDownloader();

// 下载 Base64 文件
base64ToFile("yourBase64String", "example.txt", "text/plain");

// 下载 Blob 文件
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
blobToFile(blob, "hello.txt", "text/plain");

useCopyToClipboard.ts ​

将指定的文本复制到剪贴板，触发复制后可以执行某些操作

vue
<template>
  <div>
    <input v-model="clipboardText" placeholder="输入要复制的文本" />
    <button @click="copyText">复制</button>
    <p v-if="isSuccess">复制成功！</p>
    <p v-else-if="copied">复制失败。</p>
  </div>
</template>

<script setup lang="ts">
import { useCopyToClipboard } from 'liyao-vue-common';

const { clipboardRef, isSuccessRef, copiedRef } = useCopyToClipboard();

const clipboardText = clipboardRef; //响应式存储要复制的文本内容
const isSuccess = isSuccessRef;    // 标记最后一次复制操作是否成功
const copied = copiedRef;         // 标记是否已触发复制操作（无论成功与否）

const copyText = () => {
  if(copied){
    ElMessage.warning("开通会员")
  }
  // 修改 clipboardRef 的值触发复制操作
  clipboardRef.value = clipboardText.value;
};
</script>