复制后弹窗提示

复制后弹窗提示

目录

• 复制后弹窗提示
• 目录
• 背景
• 环境
• 版权
• 配置

[toc]

背景

看到 王嘉祥 大佬的zola博客，在拷贝文字后，网站顶部会出现一个关于版权的弹窗提示，这个新鲜功能，我们的Teek怎么错过呢？安排走起。🤣

环境

在 Teek@1.4.6-2025.8.31 上测试成功。

2025年9月22日测试。

版权

配置来自《白木》大佬的指导，感谢大佬💖💖💖。

配置

（1）创建docs\.vitepress\theme\composables\useCopyEvent.ts文件：

// 搭配modal.scss使用
export function useCopyEvent(): void {
  document.addEventListener("copy", () => {
    showSlideBanner();
  });

  function showSlideBanner(): void {
    const banner = document.createElement("div");
    banner.className = "slide-banner";
    banner.innerHTML = `
      <div class="slide-content">
        <!-- 这里是复制后，提示的文本内容-->
        <h1>✨️你拷贝了哦！~被我发现呢，一定要标注本文来源哦！</h1>
      </div>
      <div class="slide-block"></div>
    `;

    document.body.appendChild(banner);

    // 出现动画~
    setTimeout(() => {
      banner.classList.add("show");
    }, 10);

    setTimeout(() => {
      const slideBlock = banner.querySelector('.slide-block') as HTMLElement;
      slideBlock.style.width = '100%';
    }, 10);

    setTimeout(() => {
      banner.classList.add("hide");
    }, 5000);
  }
}

（2）注册，使其生效

编辑docs\.vitepress\theme\index.ts文件：

// 引入复制事件（复制后弹窗提示）
import { useCopyEvent } from "./composables/useCopyEvent.ts";


if (typeof window !== 'undefined') {
      // 监听复制事件
      useCopyEvent();
    }

（3）创建docs\.vitepress\theme\style\modal.scss样式文件

// 搭配useCopyEvent.ts使用

.slide-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgb(0, 119, 255); // 背景的淡蓝色
  text-align: center;
  overflow: hidden;
  transform: translateY(-100%);
  transition: transform 1s ease, opacity 1s ease;

  .slide-content {
    padding: 20px;
    font-size: 1rem;
    backdrop-filter: blur(5px); // 预设值）当设置为半透明背景的时候，会有高斯模糊玻璃质感
    position: relative;
    z-index: 2;

    h1 {
      margin: 0;
      font-size: 1.2rem;
      color: rgb(255, 255, 255); // 文字的颜色配置
      font-weight: bold;
    }
  }

  .slide-block {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: rgb(0, 153, 255); // 滑动块的颜色配置
    transition: width 4s ease-in-out; // 动画持续时间的配置
    animation: remove-corner 4s ease-in-out forwards;
    border-top-right-radius: 25px; // 圆角效果，注释/删除，取消圆角，需要同时删除下面的代码🔽
    border-bottom-right-radius: 25px; // 圆角效果，注释/删除，取消圆角，需要同时删除上面的代码🔼
    z-index: 1;
  }

  &.show {
    transform: translateY(0);
  }

  &.hide {
    transform: translateY(-100%);
    opacity: 0;

    .slide-block {
      width: 100%;
      border-radius: 0;
    }
  }
}

@keyframes remove-corner {
  0% {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
  }
  80% {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  100% {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media (max-width: 768px) {
  .slide-content {
    font-size: 0.9rem;
    padding: 15px;
  }
}

引入样式文件：编辑docs\.vitepress\theme\style\index.scss文件

@use "./modal.scss" as *; // 弹窗样式

（4）验证

结束。