From 11d40fa791ec0a9dab343d90af6731d9e249720d Mon Sep 17 00:00:00 2001
From: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>
Date: Sun, 31 Jan 2021 04:42:29 -0600
Subject: [PATCH] feat(docs): add copy feat for demo (#1398)

---
 package.json                      |  1 +
 website/components/demo-block.vue | 78 ++++++++++++++++++++++++-------
 website/i18n/component.json       | 25 ++++++++--
 yarn.lock                         |  5 ++
 4 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index caf88872de..57464df75b 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-vue": "^2.0.2",
     "chalk": "^4.1.0",
+    "clipboard-copy": "^4.0.1",
     "cp-cli": "^2.0.0",
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
diff --git a/website/components/demo-block.vue b/website/components/demo-block.vue
index 4daa06d4c9..dd447608bc 100644
--- a/website/components/demo-block.vue
+++ b/website/components/demo-block.vue
@@ -28,25 +28,38 @@
       <transition name="text-slide">
         <span v-show="hovering">{{ controlText }}</span>
       </transition>
-      <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
-        <transition name="text-slide">
-          <el-button
-            v-show="hovering || isExpanded"
-            size="small"
-            type="text"
-            class="control-button"
-            @click.stop="goCodepen"
-          >
-            {{ langConfig['button-text'] }}
-          </el-button>
-        </transition>
-      </el-tooltip>
+      <div class="control-button-container">
+        <el-button
+          v-show="hovering || isExpanded"
+          ref="copyButton"
+          size="small"
+          type="text"
+          class="control-button copy-button"
+          @click.stop="copy"
+        >
+          {{ langConfig['copy-button-text'] }}
+        </el-button>
+        <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
+          <transition name="text-slide">
+            <el-button
+              v-show="hovering || isExpanded"
+              size="small"
+              type="text"
+              class="control-button  run-online-button"
+              @click.stop="goCodepen"
+            >
+              {{ langConfig['run-online-button-text'] }}
+            </el-button>
+          </transition>
+        </el-tooltip>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { nextTick } from 'vue'
 import hljs from 'highlight.js'
+import clipboardCopy from 'clipboard-copy'
 import compoLang from '../i18n/component.json'
 import { stripScript, stripStyle, stripTemplate } from '../util'
 const version = '1.0.0' // element version
@@ -163,6 +176,35 @@ export default {
   },
 
   methods: {
+    copy() {
+      const res = clipboardCopy(`
+<template>
+${this.codepen.html}
+</template>
+
+<script>
+${'  ' + this.codepen.script}
+\<\/script>
+
+<style>
+${this.codepen.style}
+</style>
+`)
+
+      res.then(() => {
+        this.$message({
+          showClose: true,
+          message: this.langConfig['copy-success'],
+          type: 'success',
+        })
+      }).catch(() => {
+        this.$message({
+          showClose: true,
+          message: this.langConfig['copy-error'],
+          type: 'error',
+        })
+      })
+    },
     goCodepen() {
       // since 2.6.2 use code rather than jsfiddle https://blog.codepen.io/documentation/api/prefill/
       const { script, html, style } = this.codepen
@@ -335,15 +377,19 @@ export default {
         transform: translateX(10px);
       }
 
-      .control-button {
-        line-height: 26px;
+      .control-button-container {
+        line-height: 40px;
         position: absolute;
         top: 0;
         right: 0;
-        font-size: 14px;
         padding-left: 5px;
         padding-right: 25px;
       }
+
+      .control-button {
+        font-size: 14px;
+        margin: 0 10px;
+      }
     }
   }
 </style>
diff --git a/website/i18n/component.json b/website/i18n/component.json
index 493a54777d..b2d971b1db 100644
--- a/website/i18n/component.json
+++ b/website/i18n/component.json
@@ -4,7 +4,10 @@
     "demo-block": {
       "hide-text": "隐藏代码",
       "show-text": "显示代码",
-      "button-text": "在线运行",
+      "copy-button-text": "复制代码片段",
+      "copy-success": "已复制！",
+      "copy-error": "该浏览器不支持自动复制！",
+      "run-online-button-text": "在线运行",
       "tooltip-text": "前往 codepen.io 运行此示例"
     },
     "footer": {
@@ -35,7 +38,10 @@
     "demo-block": {
       "hide-text": "Hide",
       "show-text": "Expand",
-      "button-text": "Try it!",
+      "copy-button-text": "Copy",
+      "copy-success": "Copied！",
+      "copy-error": "This browser does not support automatic copy！",
+      "run-online-button-text": "Try it!",
       "tooltip-text": "Run this demo on codepen.io"
     },
     "footer": {
@@ -66,7 +72,10 @@
     "demo-block": {
       "hide-text": "Ocultar",
       "show-text": "Mostrar",
-      "button-text": "Probar",
+      "copy-button-text": "Copiar",
+      "copy-success": "Copiar correctamente!",
+      "copy-error": "Este navegador no admite copia automática!",
+      "run-online-button-text": "Probar",
       "tooltip-text": "Prueba este ejemplo en codepen.io"
     },
     "footer": {
@@ -97,7 +106,10 @@
     "demo-block": {
       "hide-text": "Réduire",
       "show-text": "Agrandir",
-      "button-text": "Essayez!",
+      "copy-button-text": "Copie",
+      "copy-success": "Copier avec succès!",
+      "copy-error": "Ce navigateur ne prend pas en charge la copie automatique!",
+      "run-online-button-text": "Essayez!",
       "tooltip-text": "Essayer cette démo sur codepen.io"
     },
     "footer": {
@@ -128,7 +140,10 @@
     "demo-block": {
       "hide-text": "隠す",
       "show-text": "展開する",
-      "button-text": "試してみる!",
+      "copy-button-text": "コピー",
+      "copy-success": "正常にコピー!",
+      "copy-error": "このブラウザは自動コピーをサポートしていません!",
+      "run-online-button-text": "試してみる!",
       "tooltip-text": "codepen.ioでこのデモを実行します。"
     },
     "footer": {
diff --git a/yarn.lock b/yarn.lock
index f73ab2c497..512e68477e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4117,6 +4117,11 @@ cli-width@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
 
+clipboard-copy@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npm.taobao.org/clipboard-copy/download/clipboard-copy-4.0.1.tgz#326ef9726d4ffe72d9a82a7bbe19379de692017d"
+  integrity sha1-Mm75cm1P/nLZqCp7vhk3neaSAX0=
+
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"