feat(component): 增加剪贴板示例

src/enum/route.ts

@@ -20,6 +20,7 @@ export enum EnumRoutePath {
   'component_editor_quill' = '/component/editor/quill',
   'component_editor_markdown' = '/component/editor/markdown',
   'component_swiper' = '/component/swiper',
+  'component_copy' = '/component/copy',
   'multi-menu' = '/multi-menu',
   'multi-menu_first' = '/multi-menu/first',
   'multi-menu_first_second' = '/multi-menu/first/second',
@@ -52,6 +53,7 @@ export enum EnumRouteTitle {
   'component_editor_quill' = '富文本编辑器',
   'component_editor_markdown' = 'markdown编辑器',
   'component_swiper' = 'Swiper插件',
+  'component_copy' = '剪贴板',
   'multi-menu' = '多级菜单',
   'multi-menu_first' = '一级菜单',
   'multi-menu_first_second' = '二级菜单',

src/router/modules/component.ts

@@ -7,12 +7,14 @@ import ComponentVideo from '@/views/component/video/index.vue';
 import EditorQuill from '@/views/component/editor/quill/index.vue';
 import EditorMarkdown from '@/views/component/editor/markdown/index.vue';
 import ComponentSwiper from '@/views/component/swiper/index.vue';
+import ComponentCopy from '@/views/component/copy/index.vue';
 
 setRouterCacheName(ComponentMap, ROUTE_NAME_MAP.get('component_map'));
 setRouterCacheName(ComponentVideo, ROUTE_NAME_MAP.get('component_video'));
 setRouterCacheName(EditorQuill, ROUTE_NAME_MAP.get('component_editor_quill'));
 setRouterCacheName(EditorMarkdown, ROUTE_NAME_MAP.get('component_editor_markdown'));
 setRouterCacheName(ComponentSwiper, ROUTE_NAME_MAP.get('component_swiper'));
+setRouterCacheName(ComponentSwiper, ROUTE_NAME_MAP.get('component_copy'));
 
 const COMPONENT: CustomRoute = {
   name: ROUTE_NAME_MAP.get('component'),
@@ -86,6 +88,15 @@ const COMPONENT: CustomRoute = {
         requiresAuth: true,
         title: EnumRouteTitle.component_swiper
       }
+    },
+    {
+      name: ROUTE_NAME_MAP.get('component_copy'),
+      path: EnumRoutePath.component_copy,
+      component: ComponentCopy,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.component_copy
+      }
     }
   ]
 };

src/views/component/copy/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <n-card title="文本复制" class="h-full shadow-sm rounded-16px">
+      <n-input-group>
+        <n-input v-model:value="source" placeholder="请输入要复制的内容吧" />
+        <n-button type="primary" @click="handleCopy">复制</n-button>
+      </n-input-group>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { NCard, NInputGroup, NInput, NButton, useMessage } from 'naive-ui';
+import { useClipboard } from '@vueuse/core';
+
+const source = ref('');
+const message = useMessage();
+const { copy, isSupported } = useClipboard();
+
+function handleCopy() {
+  if (!isSupported) {
+    message.error('您的浏览器不支持Clipboard API');
+    return;
+  }
+  if (!source.value) {
+    message.error('请输入要复制的内容');
+    return;
+  }
+  copy(source.value);
+  message.success(`复制成功：${source.value}`);
+}
+</script>
+<style scoped></style>