chore(cli): extract copyToClipboard to common (#10263)

* chore(cli): extract copyToClipboard to common

* style: update copied

packages/vant-cli/site/common/index.js

@@ -8,4 +8,31 @@ export function decamelize(str, sep = '-') {
     .toLowerCase();
 }
 
+// from https://30secondsofcode.org
+export function copyToClipboard(str) {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+
+  const selection = document.getSelection();
+
+  if (!selection) {
+    return;
+  }
+
+  const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
+
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+
+  if (selected) {
+    selection.removeAllRanges();
+    selection.addRange(selected);
+  }
+}
+
 export { isMobile };

packages/vant-cli/site/desktop/components/Content.vue

@@ -8,32 +8,7 @@
 </template>
 
 <script>
-// from https://30secondsofcode.org
-function copyToClipboard(str) {
-  const el = document.createElement('textarea');
-  el.value = str;
-  el.setAttribute('readonly', '');
-  el.style.position = 'absolute';
-  el.style.left = '-9999px';
-  document.body.appendChild(el);
-
-  const selection = document.getSelection();
-
-  if (!selection) {
-    return;
-  }
-
-  const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
-
-  el.select();
-  document.execCommand('copy');
-  document.body.removeChild(el);
-
-  if (selected) {
-    selection.removeAllRanges();
-    selection.addRange(selected);
-  }
-}
+import { copyToClipboard } from '../../common';
 
 export default {
   name: 'VanDocContent',
@@ -79,11 +54,14 @@ export default {
     },
 
     copyAction() {
-      const codeBoxs = document.querySelectorAll('.van-doc-card pre code');
+      const codeBoxes = document.querySelectorAll('.van-doc-card pre code');
 
-      if (!codeBoxs || !codeBoxs.length) return;
-      for (let i = 0; i < codeBoxs.length; i++) {
-        const item = codeBoxs[i];
+      if (!codeBoxes || !codeBoxes.length) {
+        return;
+      }
+
+      for (let i = 0; i < codeBoxes.length; i++) {
+        const item = codeBoxes[i];
         let timer = null;
 
         item.addEventListener('click', () => {
@@ -91,6 +69,7 @@ export default {
           const content = item.innerText;
           copyToClipboard(content);
           item.classList.add('code-copy-success');
+
           timer = setTimeout(() => {
             item.classList.remove('code-copy-success');
             timer = null;
@@ -144,17 +123,19 @@ export default {
     z-index: 9;
     right: -4px;
     top: 0;
-    animation: CODE_COPY_ANITION 0.8s;
+    animation: ease-out code-copy-animation 0.2s;
     animation-fill-mode: forwards;
   }
 
-  @keyframes CODE_COPY_ANITION {
+  @keyframes code-copy-animation {
     0% {
       top: 0;
+      opacity: 0;
     }
 
     100% {
       top: -20px;
+      opacity: 1;
     }
   }
 

packages/vant-cli/site/desktop/components/DemoPlayground.vue

@@ -19,7 +19,7 @@
             title="Toggle source code panel"
             class="action-icon"
             role="source"
-            @click="toogleSource"
+            @click="toggleSource"
           />
         </div>
         <div
@@ -33,32 +33,7 @@
 </template>
 
 <script>
-// from https://30secondsofcode.org
-function copyToClipboard(str) {
-  const el = document.createElement('textarea');
-  el.value = str;
-  el.setAttribute('readonly', '');
-  el.style.position = 'absolute';
-  el.style.left = '-9999px';
-  document.body.appendChild(el);
-
-  const selection = document.getSelection();
-
-  if (!selection) {
-    return;
-  }
-
-  const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
-
-  el.select();
-  document.execCommand('copy');
-  document.body.removeChild(el);
-
-  if (selected) {
-    selection.removeAllRanges();
-    selection.addRange(selected);
-  }
-}
+import { copyToClipboard } from '../../common';
 
 export default {
   name: 'DemoPlayground',
@@ -77,7 +52,7 @@ export default {
   },
   methods: {
     unescape,
-    toogleSource() {
+    toggleSource() {
       this.showSource = !this.showSource;
     },
     copySourceCode() {