增加代码块的复制按钮

kingwrcy · Aug 9, 2024 · 69ced20 · 69ced20
1 parent 1550c76
commit 69ced20
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/front/nuxt.config.ts b/front/nuxt.config.ts
@@ -30,7 +30,7 @@ export default defineNuxtConfig({
             script: [
                 {src: `/js/APlayer.min.js`, type: 'text/javascript', async: true, defer: true},
                 {src: `/js/Meting.min.js`, type: 'text/javascript', async: true, defer: true},
-                // {src: `/js/main.js`, type: 'text/javascript', async: true, defer: true},
+                {src: `/js/main.js`, type: 'text/javascript', async: true, defer: true},
             ]
         }
     },

diff --git a/front/public/js/main.js b/front/public/js/main.js
@@ -15,25 +15,31 @@ function copyToClipboard(text) {
         document.body.removeChild(textArea);
     }
 }
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}
 
-
-document.addEventListener('DOMContentLoaded',()=>{
-    setTimeout(()=>{
-        const list = document.querySelectorAll(".markdown-content>pre.shiki")
-        list.forEach((pre)=>{
-            const copyBtn = document.createElement('div')
-            copyBtn.innerText='复制'
-            copyBtn.classList.add('copyBtn')
-            copyBtn.addEventListener('click',()=>{
-                copyToClipboard(pre.querySelector("code").innerText)
-                copyBtn.innerText = '已复制!'
-                copyBtn.style.color= '#ccc'
-                setTimeout(()=>{
-                    copyBtn.innerText = '复制'
-                    copyBtn.style.color= '#000'
-                },3000)
-            })
-            pre.insertAdjacentElement('beforeend',copyBtn)
-        })
-    },3000)
-})
+function init() {
+    console.log('DOMContentLoaded');
+    setTimeout(() => {
+        const list = document.querySelectorAll(".markdown-content>pre.shiki");
+        console.log('find code block:', list);
+        list.forEach((pre) => {
+            const copyBtn = document.createElement('div');
+            copyBtn.innerText = '复制';
+            copyBtn.classList.add('copyBtn');
+            copyBtn.addEventListener('click', () => {
+                copyToClipboard(pre.querySelector("code").innerText);
+                copyBtn.innerText = '已复制!';
+                copyBtn.style.color = '#ccc';
+                setTimeout(() => {
+                    copyBtn.innerText = '复制';
+                    copyBtn.style.color = '#000';
+                }, 3000);
+            });
+            pre.insertAdjacentElement('beforeend', copyBtn);
+        });
+    }, 5000);
+}