From d348b36159f5d7171bc3ac0903890b9191304da9 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 8 Feb 2022 11:41:37 +0800
Subject: [PATCH] chore(cli): extract copyToClipboard to common (#10263)

* chore(cli): extract copyToClipboard to common

* style: update copied
---
 packages/vant-cli/site/common/index.js        | 27 +++++++++++
 .../site/desktop/components/Content.vue       | 45 ++++++-------------
 .../desktop/components/DemoPlayground.vue     | 31 ++-----------
 .../vant/docs/markdown/changelog.en-US.md     | 10 ++---
 .../vant/docs/markdown/changelog.zh-CN.md     | 10 ++---
 5 files changed, 53 insertions(+), 70 deletions(-)

diff --git a/packages/vant-cli/site/common/index.js b/packages/vant-cli/site/common/index.js
index 0da499ee8..dcfb367e9 100644
--- a/packages/vant-cli/site/common/index.js
+++ b/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 };
diff --git a/packages/vant-cli/site/desktop/components/Content.vue b/packages/vant-cli/site/desktop/components/Content.vue
index af2b014c2..279e69b14 100644
--- a/packages/vant-cli/site/desktop/components/Content.vue
+++ b/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;
     }
   }
 
diff --git a/packages/vant-cli/site/desktop/components/DemoPlayground.vue b/packages/vant-cli/site/desktop/components/DemoPlayground.vue
index d8b8afbc0..e7d81d9ab 100644
--- a/packages/vant-cli/site/desktop/components/DemoPlayground.vue
+++ b/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() {
diff --git a/packages/vant/docs/markdown/changelog.en-US.md b/packages/vant/docs/markdown/changelog.en-US.md
index fc9ea9e79..26a1ca953 100644
--- a/packages/vant/docs/markdown/changelog.en-US.md
+++ b/packages/vant/docs/markdown/changelog.en-US.md
@@ -28,14 +28,14 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 **Feature**
 
-- Locale: add Hindi translation [#10248](https://github.com/issues/10248)
-- Locale: add Korean translations [#10243](https://github.com/issues/10243)
-- improve cursor of haptics elements [#10232](https://github.com/issues/10232)
+- Locale: add Hindi translation [#10248](https://github.com/youzan/vant/issues/10248)
+- Locale: add Korean translations [#10243](https://github.com/youzan/vant/issues/10243)
+- improve cursor of haptics elements [#10232](https://github.com/youzan/vant/issues/10232)
 
 **Bug Fixes**
 
-- Icon: remove white space under image when using image URL [#10220](https://github.com/issues/10220)
-- TreeSelect: click-nav event not work when clicking active item [#10239](https://github.com/issues/10239)
+- Icon: remove white space under image when using image URL [#10220](https://github.com/youzan/vant/issues/10220)
+- TreeSelect: click-nav event not work when clicking active item [#10239](https://github.com/youzan/vant/issues/10239)
 
 ### [v3.4.2](https://github.com/compare/v3.4.1...v3.4.2)
 
diff --git a/packages/vant/docs/markdown/changelog.zh-CN.md b/packages/vant/docs/markdown/changelog.zh-CN.md
index f980f7613..c52e3ebfb 100644
--- a/packages/vant/docs/markdown/changelog.zh-CN.md
+++ b/packages/vant/docs/markdown/changelog.zh-CN.md
@@ -28,14 +28,14 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 **Feature**
 
-- Locale: 新增 Hindi 印地语 [#10248](https://github.com/issues/10248)
-- Locale: 新增 Korean 韩语 [#10243](https://github.com/issues/10243)
-- 优化 cursor 样式 [#10232](https://github.com/issues/10232)
+- Locale: 新增 Hindi 印地语 [#10248](https://github.com/youzan/vant/issues/10248)
+- Locale: 新增 Korean 韩语 [#10243](https://github.com/youzan/vant/issues/10243)
+- 优化 cursor 样式 [#10232](https://github.com/youzan/vant/issues/10232)
 
 **Bug Fixes**
 
-- Icon: 修复使用图片作为图标时水平未对齐的问题 [#10220](https://github.com/issues/10220)
-- TreeSelect: 修复重复点击时无法触发 click-nav 事件的问题 [#10239](https://github.com/issues/10239)
+- Icon: 修复使用图片作为图标时水平未对齐的问题 [#10220](https://github.com/youzan/vant/issues/10220)
+- TreeSelect: 修复重复点击时无法触发 click-nav 事件的问题 [#10239](https://github.com/youzan/vant/issues/10239)
 
 ### [v3.4.2](https://github.com/compare/v3.4.1...v3.4.2)