复制后弹窗提示

 1// 搭配modal.scss使用
 2export function useCopyEvent(): void {
 3  document.addEventListener("copy", () => {
 4    showSlideBanner();
 5  });
 6
 7  function showSlideBanner(): void {
 8    const banner = document.createElement("div");
 9    banner.className = "slide-banner";
10    banner.innerHTML = `
11      <div class="slide-content">
12        <!-- 这里是复制后，提示的文本内容-->
13        <h1>✨️你拷贝了哦！~被我发现呢，一定要标注本文来源哦！</h1>
14      </div>
15      <div class="slide-block"></div>
16    `;
17
18    document.body.appendChild(banner);
19
20    // 出现动画~
21    setTimeout(() => {
22      banner.classList.add("show");
23    }, 10);
24
25    setTimeout(() => {
26      const slideBlock = banner.querySelector('.slide-block') as HTMLElement;
27      slideBlock.style.width = '100%';
28    }, 10);
29
30    setTimeout(() => {
31      banner.classList.add("hide");
32    }, 5000);
33  }
34}

1// 引入复制事件（复制后弹窗提示）
2import { useCopyEvent } from "./composables/useCopyEvent.ts";
3
4
5if (typeof window !== 'undefined') {
6      // 监听复制事件
7      useCopyEvent();
8    }

 1// 搭配useCopyEvent.ts使用
 2
 3.slide-banner {
 4  position: fixed;
 5  top: 0;
 6  left: 0;
 7  width: 100%;
 8  z-index: 9999;
 9  background: rgb(0, 119, 255); // 背景的淡蓝色
10  text-align: center;
11  overflow: hidden;
12  transform: translateY(-100%);
13  transition: transform 1s ease, opacity 1s ease;
14
15  .slide-content {
16    padding: 20px;
17    font-size: 1rem;
18    backdrop-filter: blur(5px); // 预设值）当设置为半透明背景的时候，会有高斯模糊玻璃质感
19    position: relative;
20    z-index: 2;
21
22    h1 {
23      margin: 0;
24      font-size: 1.2rem;
25      color: rgb(255, 255, 255); // 文字的颜色配置
26      font-weight: bold;
27    }
28  }
29
30  .slide-block {
31    position: absolute;
32    top: 0;
33    left: 0;
34    height: 100%;
35    width: 0;
36    background-color: rgb(0, 153, 255); // 滑动块的颜色配置
37    transition: width 4s ease-in-out; // 动画持续时间的配置
38    animation: remove-corner 4s ease-in-out forwards;
39    border-top-right-radius: 25px; // 圆角效果，注释/删除，取消圆角，需要同时删除下面的代码🔽
40    border-bottom-right-radius: 25px; // 圆角效果，注释/删除，取消圆角，需要同时删除上面的代码🔼
41    z-index: 1;
42  }
43
44  &.show {
45    transform: translateY(0);
46  }
47
48  &.hide {
49    transform: translateY(-100%);
50    opacity: 0;
51
52    .slide-block {
53      width: 100%;
54      border-radius: 0;
55    }
56  }
57}
58
59@keyframes remove-corner {
60  0% {
61    border-top-right-radius: 25px;
62    border-bottom-right-radius: 25px;
63  }
64  80% {
65    border-top-right-radius: 15px;
66    border-bottom-right-radius: 15px;
67  }
68  100% {
69    border-top-right-radius: 0;
70    border-bottom-right-radius: 0;
71  }
72}
73
74@media (max-width: 768px) {
75  .slide-content {
76    font-size: 0.9rem;
77    padding: 15px;
78  }
79}

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