---
date: 2025-03-25 19:05:58
title: 常用hooks
permalink: /pages/fad018
tags:
  - vue Hooks
top: 5
author:
  name: 华总
  link: https://xiaoying.org.cn
categories:
  - 使用指南
  - 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>
```