feat: add the v-clipboard directive

package.json

@@ -30,6 +30,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.1.3",
     "swiper": "^9.3.2",
+    "v-clipboard": "3.0.0-next.1",
     "vditor": "^3.9.3",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",

src/locales/cn.json

@@ -14,6 +14,7 @@
     "commonTable": "基础表格",
     "commonImagePreview": "图片预览",
     "commonGuide": "引导页",
+    "commonClipboard": "剪贴板",
     "commonDocs": "文档",
     "commonMultilevelMenu": "多级菜单",
     "commonAuthorityManagement": "权限管理",

src/locales/en.json

@@ -13,6 +13,7 @@
     "commonXGPlayer": "Watermelon Player",
     "commonTable": "Basic Table",
     "commonImagePreview": "Image Preview",
+    "commonClipboard": "Clipboard",
     "commonGuide": "Introductory Page",
     "commonDocs": "Docs",
     "commonMultilevelMenu": "Multilevel Menu",

src/locales/kr.json

@@ -14,6 +14,7 @@
     "commonTable": "기본 테이블",
     "commonImagePreview": "이미지 미리보기",
     "commonGuide": "소개 페이지",
+    "commonClipboard": "클립보드",
     "commonDocs": "문서",
     "commonMultilevelMenu": "다단계 메뉴",
     "commonAuthorityManagement": "권한 관리",

src/modules/clipboard.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue'
+import Clipboard from 'v-clipboard'
+
+export const useClipboard = (app: App) => {
+  app.use(Clipboard)
+}

src/modules/index.ts

@@ -2,9 +2,11 @@ import { App } from 'vue'
 import { usePinia } from './pinia'
 import { useVueRouter } from './vue-router'
 import { useI18n } from './i18n'
+import { useClipboard } from './clipboard'
 
 export default async (app: App) => {
   useVueRouter(app)
   usePinia(app)
   useI18n(app)
+  useClipboard(app)
 }

src/router/modules/constant-routes.ts

@@ -155,6 +155,15 @@ export const CONSTANT_ROUTES: VAdmireRoute[] = [
           icon: 'bx:bx-image',
         },
       },
+      {
+        path: 'clipboard',
+        name: 'Feature_Clipboard',
+        component: '~/views/features/Clipboard.vue',
+        meta: {
+          text: '$t("route.commonClipboard")',
+          icon: 'mdi:clipboard-text',
+        },
+      },
       {
         path: '',
         name: 'GuideIndex',

src/views/features/Clipboard.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+const { success, error } = useNaiveMessage()
+
+const content = ref('拷贝DOM元素内容')
+const clipboardSuccessHandler = () => {
+  success('拷贝成功')
+}
+const clipboardErrorHandler = () => {
+  error('拷贝失败')
+}
+
+</script>
+
+<template>
+  <div class="border m-2 border-vBorderLight dark:border-vBorderDark">
+    <div class="text-base font-bold mb-4">
+      v-clipboard 剪贴板指令
+    </div>
+    <NButton
+      v-clipboard="content"
+      v-clipboard:success="clipboardSuccessHandler"
+      v-clipboard:error="clipboardErrorHandler"
+      type="primary"
+    >
+      {{ content }}
+    </NButton>
+  </div>
+</template>