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
+import { copyToClipboard } from '../../common';
-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 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;
+      if (!codeBoxes || !codeBoxes.length) {
-      for (let i = 0; i < codeBoxs.length; i++) {
+        return;
-        const item = codeBoxs[i];
+      }
+
+      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
+import { copyToClipboard } from '../../common';
-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 default {
   name: 'DemoPlayground',
@@ -77,7 +52,7 @@ export default {
   },
   methods: {
     unescape,
-    toogleSource() {
+    toggleSource() {
       this.showSource = !this.showSource;
     },
     copySourceCode() {

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 Hindi translation [#10248](https://github.com/youzan/vant/issues/10248)
-- Locale: add Korean translations [#10243](https://github.com/issues/10243)
+- Locale: add Korean translations [#10243](https://github.com/youzan/vant/issues/10243)
-- improve cursor of haptics elements [#10232](https://github.com/issues/10232)
+- 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)
+- 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/issues/10239)
+- 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)
 

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: 新增 Hindi 印地语 [#10248](https://github.com/youzan/vant/issues/10248)
-- Locale: 新增 Korean 韩语 [#10243](https://github.com/issues/10243)
+- Locale: 新增 Korean 韩语 [#10243](https://github.com/youzan/vant/issues/10243)
-- 优化 cursor 样式 [#10232](https://github.com/issues/10232)
+- 优化 cursor 样式 [#10232](https://github.com/youzan/vant/issues/10232)
 
 **Bug Fixes**
 
-- Icon: 修复使用图片作为图标时水平未对齐的问题 [#10220](https://github.com/issues/10220)
+- Icon: 修复使用图片作为图标时水平未对齐的问题 [#10220](https://github.com/youzan/vant/issues/10220)
-- TreeSelect: 修复重复点击时无法触发 click-nav 事件的问题 [#10239](https://github.com/issues/10239)
+- TreeSelect: 修复重复点击时无法触发 click-nav 事件的问题 [#10239](https://github.com/youzan/vant/issues/10239)
 
 ### [v3.4.2](https://github.com/compare/v3.4.1...v3.4.2)