From 097a83b9a35bbc2f7af37a62015d2b54e06b1327 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Thu, 13 Oct 2022 11:32:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(hooks):=20=E6=8A=BD=E7=A6=BB=E5=89=AA?=
 =?UTF-8?q?=E8=B4=B4=E6=9D=BFhook=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hook/index.ts                    |  1 +
 src/hook/useClipBoard.ts             | 26 ++++++++++++++++++++++++++
 src/views/plugin/clipboard/index.vue | 22 +++-------------------
 3 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 src/hook/useClipBoard.ts

diff --git a/src/hook/index.ts b/src/hook/index.ts
index 73ca960..6f40bc7 100644
--- a/src/hook/index.ts
+++ b/src/hook/index.ts
@@ -2,3 +2,4 @@ export * from './useAppRouter';
 export * from './useBoolean';
 export * from './useLoading';
 export * from './useEcharts';
+export * from './useClipBoard';
diff --git a/src/hook/useClipBoard.ts b/src/hook/useClipBoard.ts
new file mode 100644
index 0000000..0e39d74
--- /dev/null
+++ b/src/hook/useClipBoard.ts
@@ -0,0 +1,26 @@
+export function useClipBoard() {
+  function isSupport() {
+    return !navigator.clipboard;
+  }
+  async function copy(text: string) {
+    if (isSupport()) {
+      return window.$message?.error('当前浏览器不支持复制！');
+    }
+    if (!text) {
+      window.$message?.error('请输入要复制的内容');
+      return;
+    }
+    navigator.clipboard.writeText(text).then(
+      () => {
+        window.$message?.success(`复制成功：${text}`);
+      },
+      () => {
+        window.$message?.error('复制失败');
+      },
+    );
+  }
+
+  return {
+    copy,
+  };
+}
diff --git a/src/views/plugin/clipboard/index.vue b/src/views/plugin/clipboard/index.vue
index 65a1235..dc446c5 100644
--- a/src/views/plugin/clipboard/index.vue
+++ b/src/views/plugin/clipboard/index.vue
@@ -2,33 +2,17 @@
   <n-card>
     <n-input-group>
       <n-input v-model:value="text" placeholder="请输入要复制的内容" />
-      <n-button type="primary" @click="handleCopy">复制</n-button>
+      <n-button type="primary" @click="copy(text)">复制</n-button>
     </n-input-group>
   </n-card>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useClipBoard } from '@/hook';
 
+const { copy } = useClipBoard();
 const text = ref('Hello Clipboard');
-
-function handleCopy() {
-  if (!navigator.clipboard) {
-    window.$message?.error('当前浏览器不支持复制！');
-  }
-  if (!text.value) {
-    window.$message?.error('请输入要复制的内容');
-    return;
-  }
-  navigator.clipboard.writeText(text.value).then(
-    (res) => {
-      window.$message?.success(`复制成功：${text.value}`);
-    },
-    (err) => {
-      window.$message?.error('复制失败');
-    },
-  );
-}
 </script>
 
 <style scoped></style>