From fd86dc3ca7c63bd8ccd010263dd1cd6e99d56905 Mon Sep 17 00:00:00 2001
From: diamont1001 <diamont1001@163.com>
Date: Mon, 1 Jul 2024 16:54:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E8=A7=A3=E5=86=B3=20useClipboard=20?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=E6=80=A7=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CopyButton/index.vue   | 62 +++++++++++++++++++++++
 src/types/components.d.ts             |  1 +
 src/views/demo/curd/config/content.ts |  9 +++-
 src/views/demo/curd/index.vue         |  8 +++
 src/views/demo/icons.vue              | 73 ++++++++++-----------------
 5 files changed, 107 insertions(+), 46 deletions(-)
 create mode 100644 src/components/CopyButton/index.vue

diff --git a/src/components/CopyButton/index.vue b/src/components/CopyButton/index.vue
new file mode 100644
index 00000000..8e88435c
--- /dev/null
+++ b/src/components/CopyButton/index.vue
@@ -0,0 +1,62 @@
+<!-- 复制组件 -->
+<template>
+  <el-button link @click="handleClipboard" :style="style">
+    <slot>
+      <el-icon><DocumentCopy color="var(--el-color-primary)" /></el-icon>
+    </slot>
+  </el-button>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "CopyButton",
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+function handleClipboard() {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    // 使用 Clipboard API
+    navigator.clipboard
+      .writeText(props.text)
+      .then(() => {
+        ElMessage.success("Copy successfully");
+      })
+      .catch((error) => {
+        ElMessage.warning("Copy failed");
+        console.log("[CopyButton] Copy failed", error);
+      });
+  } else {
+    // 兼容性处理（useClipboard 有兼容性问题）
+    const input = document.createElement("input");
+    input.style.position = "absolute";
+    input.style.left = "-9999px";
+    input.setAttribute("value", props.text);
+    document.body.appendChild(input);
+    input.select();
+    try {
+      const successful = document.execCommand("copy");
+      if (successful) {
+        ElMessage.success("Copy successfully!");
+      } else {
+        ElMessage.warning("Copy failed!");
+      }
+    } catch (err) {
+      ElMessage.error("Copy failed.");
+      console.log("[CopyButton] Copy failed.", err);
+    } finally {
+      document.body.removeChild(input);
+    }
+  }
+}
+</script>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 8c0b868d..7e2b2a1a 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -11,6 +11,7 @@ declare module "vue" {
     AppMain: (typeof import("./../layout/components/AppMain/index.vue"))["default"];
     VisitTrend: (typeof import("./../views/dashboard/components/VisitTrend.vue"))["default"];
     Breadcrumb: (typeof import("./../components/Breadcrumb/index.vue"))["default"];
+    CopyButton: (typeof import("./../components/CopyButton/index.vue"))["default"];
     CURD: (typeof import("./../components/CURD/index.vue"))["default"];
     DeptTree: (typeof import("./../views/system/user/components/dept-tree.vue"))["default"];
     UserImport: (typeof import("./../views/system/user/components/user-import.vue"))["default"];
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
index b4ad2084..c464555d 100644
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -82,7 +82,14 @@ const contentConfig: IContentConfig<UserPageQuery> = {
         });
       },
     },
-    { label: "手机号码", align: "center", prop: "mobile", width: 120 },
+    {
+      label: "手机号码",
+      align: "center",
+      prop: "mobile",
+      templet: "custom",
+      slotName: "mobile",
+      width: 150,
+    },
     {
       label: "状态",
       align: "center",
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index 66433559..c4a146ad 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -40,6 +40,14 @@
             {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
           </el-tag>
         </template>
+        <template #mobile="scope">
+          <el-text> {{ scope.row[scope.prop] }} </el-text>
+          <copy-button
+            v-if="scope.row[scope.prop]"
+            :text="scope.row[scope.prop]"
+            style="margin-left: 2px"
+          />
+        </template>
       </page-content>
 
       <!-- 新增 -->
diff --git a/src/views/demo/icons.vue b/src/views/demo/icons.vue
index 5fd397fe..36fe5d91 100644
--- a/src/views/demo/icons.vue
+++ b/src/views/demo/icons.vue
@@ -3,43 +3,39 @@
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
         <div class="grid">
-          <div
-            v-for="item of svg_icons"
-            :key="item"
-            @click="handleClipboard(generateIconCode(item), $event)"
-          >
-            <el-tooltip
-              effect="dark"
-              :content="generateIconCode(item)"
-              placement="top"
-            >
-              <div class="icon-item">
-                <svg-icon :icon-class="item" />
-                <span>{{ item }}</span>
-              </div>
-            </el-tooltip>
+          <div v-for="item of svg_icons" :key="item">
+            <copy-button :text="generateIconCode(item)">
+              <el-tooltip
+                effect="dark"
+                :content="generateIconCode(item)"
+                placement="top"
+              >
+                <div class="icon-item">
+                  <svg-icon :icon-class="item" />
+                  <span>{{ item }}</span>
+                </div>
+              </el-tooltip>
+            </copy-button>
           </div>
         </div>
       </el-tab-pane>
       <el-tab-pane label="Element-UI Icons">
         <div class="grid">
-          <div
-            v-for="(icon, name) of icons"
-            :key="name"
-            @click="handleClipboard(generateElementIconCode(name), $event)"
-          >
-            <el-tooltip
-              effect="dark"
-              :content="generateElementIconCode(name)"
-              placement="top"
-            >
-              <div class="icon-item">
-                <el-icon :size="20">
-                  <component :is="icon" />
-                </el-icon>
-                <span>{{ name }}</span>
-              </div>
-            </el-tooltip>
+          <div v-for="(icon, name) of icons" :key="name">
+            <copy-button :text="generateElementIconCode(name)">
+              <el-tooltip
+                effect="dark"
+                :content="generateElementIconCode(name)"
+                placement="top"
+              >
+                <div class="icon-item">
+                  <el-icon :size="20">
+                    <component :is="icon" />
+                  </el-icon>
+                  <span>{{ name }}</span>
+                </div>
+              </el-tooltip>
+            </copy-button>
           </div>
         </div>
       </el-tab-pane>
@@ -99,8 +95,6 @@ const svg_icons: string[] = [
 ];
 const icons = ref(ElementPlusIconsVue);
 
-const { copy } = useClipboard();
-
 function generateIconCode(symbol: any) {
   return `<svg-icon icon-class="${symbol}" />`;
 }
@@ -108,17 +102,6 @@ function generateIconCode(symbol: any) {
 function generateElementIconCode(symbol: any) {
   return `<el-icon><${symbol} /></el-icon>`;
 }
-
-function handleClipboard(text: any, event: any) {
-  // clipboard(text, event);
-  copy(text)
-    .then(() => {
-      ElMessage.success("Copy successfully");
-    })
-    .catch(() => {
-      ElMessage.warning("Copy failed");
-    });
-}
 </script>
 
 <style lang="scss" scoped>