refactor(hooks): remove clipboard

remove `use clipboard` add `v-copy`

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>
 

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>
 

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)
+}

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)
 }

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'

src/hooks/useClipBoard.ts

@@ -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,
-  }
-}

src/views/plugin/clipboard/index.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import { useClipBoard } from '@/hooks'
+const text = ref('Hello v-copy')
-
-const { copy } = useClipBoard()
-const text = ref('Hello Clipboard')
 </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>