From 0eaabd1547531df26a76d03cf678a21b83b87224 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Sun, 25 Jun 2023 13:08:45 +0800
Subject: [PATCH] refactor(hooks): remove `clipboard`

remove `use clipboard` add `v-copy`
---
 .../custom/Editor/MarkDownEditor/index.vue    |  2 +-
 .../custom/Editor/RichTextEditor/index.vue    |  3 --
 src/directive/copy.ts                         | 47 +++++++++++++++++++
 src/directive/index.ts                        |  2 +
 src/hooks/index.ts                            |  1 -
 src/hooks/useClipBoard.ts                     | 26 ----------
 src/views/plugin/clipboard/index.vue          | 10 ++--
 7 files changed, 54 insertions(+), 37 deletions(-)
 create mode 100644 src/directive/copy.ts
 delete mode 100644 src/hooks/useClipBoard.ts

diff --git a/src/components/custom/Editor/MarkDownEditor/index.vue b/src/components/custom/Editor/MarkDownEditor/index.vue
index c41731f..a1ef978 100644
--- a/src/components/custom/Editor/MarkDownEditor/index.vue
+++ b/src/components/custom/Editor/MarkDownEditor/index.vue
@@ -30,7 +30,7 @@ const toolbarsExclude: ToolbarNames[] = [
 
 <template>
   <MdEditor
-    v-model="data" :theme="theme" read-only :toolbars-exclude="toolbarsExclude"
+    v-model="data" :theme="theme" :toolbars-exclude="toolbarsExclude"
   />
 </template>
 
diff --git a/src/components/custom/Editor/RichTextEditor/index.vue b/src/components/custom/Editor/RichTextEditor/index.vue
index 9e98cb1..9c3c187 100644
--- a/src/components/custom/Editor/RichTextEditor/index.vue
+++ b/src/components/custom/Editor/RichTextEditor/index.vue
@@ -48,9 +48,6 @@ const initConfig = {
   // 此处为图片上传处理函数
   images_upload_handler: imagesUploadHandler,
 
-  // file_picker_types: 'file image media', // file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数
-  // 文件上传处理函数
-  // file_picker_callback: filesUploadHandler,
 }
 </script>
 
diff --git a/src/directive/copy.ts b/src/directive/copy.ts
new file mode 100644
index 0000000..55bf86d
--- /dev/null
+++ b/src/directive/copy.ts
@@ -0,0 +1,47 @@
+import type { App, Directive } from 'vue'
+
+interface CopyHTMLElement extends HTMLElement {
+  _copyText: string
+}
+
+export function setupCopy(app: App) {
+  const { isSupported, copy } = useClipboard()
+  const permissionWrite = usePermission('clipboard-write')
+
+  function clipboardEnable() {
+    if (!isSupported.value) {
+      window.$message?.error('Your browser does not support Clipboard API')
+      return false
+    }
+
+    if (permissionWrite.value !== 'granted') {
+      window.$message?.error('Currently not permitted to use Clipboard API')
+      return false
+    }
+    return true
+  }
+
+  function copyHandler(this: any) {
+    if (!clipboardEnable()) return
+    copy(this._copyText)
+    window.$message?.success('复制成功')
+  }
+
+  function updataClipboard(el: CopyHTMLElement, text: string) {
+    el._copyText = text
+    el.addEventListener('click', copyHandler)
+  }
+
+  const copyDirective: Directive<CopyHTMLElement, string> = {
+    mounted(el, binding) {
+      updataClipboard(el, binding.value)
+    },
+    updated(el, binding) {
+      updataClipboard(el, binding.value)
+    },
+    unmounted(el) {
+      el.removeEventListener('click', copyHandler)
+    },
+  }
+  app.directive('copy', copyDirective)
+}
diff --git a/src/directive/index.ts b/src/directive/index.ts
index 4a28e88..4c2a486 100644
--- a/src/directive/index.ts
+++ b/src/directive/index.ts
@@ -1,6 +1,8 @@
 import type { App } from 'vue'
 import { setupPermission } from './permission'
+import { setupCopy } from './copy'
 
 export function setupDirectives(app: App) {
   setupPermission(app)
+  setupCopy(app)
 }
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 6ed7cab..3b6ab86 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -2,5 +2,4 @@ export * from './useAppRouter'
 export * from './useBoolean'
 export * from './useLoading'
 export * from './useEcharts'
-export * from './useClipBoard'
 export * from './useSystem'
diff --git a/src/hooks/useClipBoard.ts b/src/hooks/useClipBoard.ts
deleted file mode 100644
index 2f4d05f..0000000
--- a/src/hooks/useClipBoard.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export function useClipBoard() {
-  function isSupport() {
-    return !navigator.clipboard
-  }
-  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 f695f81..e9c1053 100644
--- a/src/views/plugin/clipboard/index.vue
+++ b/src/views/plugin/clipboard/index.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import { useClipBoard } from '@/hooks'
-
-const { copy } = useClipBoard()
-const text = ref('Hello Clipboard')
+const text = ref('Hello v-copy')
 </script>
 
 <template>
   <n-card>
+    <n-h1> v-copy 使用</n-h1>
     <n-input-group>
       <n-input v-model:value="text" placeholder="请输入要复制的内容" />
-      <n-button type="primary" @click="copy(text)">
-        复制
+      <n-button v-copy="text" type="primary">
+        v-copy复制
       </n-button>
     </n-input-group>
   </n-card>