复制后弹窗提示

复制后弹窗提示

目录

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

[toc]

背景

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

环境

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

2025年9月16日测试。

版权

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

配置

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

// docs/.vitepress/theme/composables/useCopyEvent.ts
export function useCopyEvent(): void {
  document.addEventListener("copy", () => {
    showWaveBanner();
  });

  function showWaveBanner(): void {
    const banner = document.createElement("div");
    banner.className = "wave-banner"; // 顶部横幅容器
    banner.innerHTML = `
      <div class="wave-content">

       <!-- 这里是复制后，提示的文本内容-->

        <h1>你拷贝了哦！~被我发现呢，一定要标注本文来源哦！</h1>
      
      </div>
      <div class="wave-container">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
          <defs>
            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="parallax">
        //   这里可以修改波浪的颜色配表
            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(116, 255, 248, 0.06)" />
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(116, 255, 248, 0.05)" />
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(116, 255, 248, 0.04)" />
            <use xlink:href="#gentle-wave" x="48" y="7" fill="#85f7ff09" />
          </g>
        </svg>
      </div>
    `;

    document.body.appendChild(banner);

    // 3秒后逐渐消失
    setTimeout(() => {
      banner.style.opacity = "0";
      setTimeout(() => banner.remove(), 1000);
    }, 3000);
  }
}

（2）注册，使其生效

编辑docs\.vitepress\theme\style\index.scss文件：

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


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

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

// docs/.vitepress/theme/styles/wave-banner.scss

.wave-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(0, 123, 255, 0.082); // 半透明背景
  color: white;
  text-align: center;
  transition: opacity 1s ease;
  overflow: hidden;
}

.wave-content {
  padding: 20px;
  font-size: 1rem;
  backdrop-filter: blur(5px); // 高斯模糊玻璃质感

  h1 {
    margin: 0;
    font-size: 1.2rem;
    color: rgb(255, 64, 223); // 设置提示文本的颜色
    font-weight: bold;
  }
}



.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 50px;
}

.waves {
  position: relative;
  width: 100%;
  height: 50px;
  min-height: 40px;
  max-height: 60px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

@keyframes move-forever {
  0% { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}

/* 响应式 */
@media (max-width: 768px) {
  .wave-content { font-size: 0.9rem; padding: 15px; }
  .waves { height: 30px; min-height: 30px; }
}

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

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

（4）验证

结束。