ts

// 搭配modal.scss使用，这是横幅提示地基文件
export function useCopyEvent(): void {
  document.addEventListener("copy", () => {
    const selection = window.getSelection();
    if (!selection || selection.toString().trim() === "") {
      showEmptyCopyBanner();
    } else {
      showSlideBanner();
    }
  });
}

export function triggerCopyEvent(): void {
  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");
  }, 3000); // 调整横幅存在时间，这里是毫秒单位哦~
}

function showEmptyCopyBanner(): 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");
  }, 3000); // 空复制提示显示时间稍短
}

scss

// 搭配useCopyEvent.ts使用，这是横幅提示样式文件

.slide-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: var(--vp-c-brand-1); // 背景的颜色配置
  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: #c7c7c72f; // 滑动块的颜色配置
    transition: width 2s ease-in-out; // 动画持续时间的配置
    // animation: remove-corner 2s ease-in-out forwards; // 逐渐圆角的动画配置，建议与  transition 保持一直呢~😏
    // 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;
  }
}

ts

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

export default {
  extends: Teek,

  Layout: defineComponent({
    setup() {
      if (typeof window !== "undefined") {
        // 监听复制事件
        useCopyEvent();
      }
    },
  }),
};