feat: 增加复制组件，解决 useClipboard 兼容性问题

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",

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>
 
       <!-- 新增 -->

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>