Merge pull request #16 from yanbowe/main

增加剪贴板功能示例

src/enum/route.ts

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

src/router/modules/feat.ts

@@ -0,0 +1,33 @@
+import type { CustomRoute } from '@/interface';
+import { EnumRoutePath, EnumRouteTitle } from '@/enum';
+import { BasicLayout } from '@/layouts';
+import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
+import FeatCopy from '@/views/feat/copy/index.vue';
+
+setRouterCacheName(FeatCopy, ROUTE_NAME_MAP.get('feat_copy'));
+
+const FEAT: CustomRoute = {
+  name: ROUTE_NAME_MAP.get('feat'),
+  path: EnumRoutePath.feat,
+  component: BasicLayout,
+  redirect: { name: ROUTE_NAME_MAP.get('feat_copy') },
+  meta: {
+    requiresAuth: true,
+    title: EnumRouteTitle.feat,
+    icon: 'ic:round-repeat'
+  },
+  children: [
+    {
+      name: ROUTE_NAME_MAP.get('feat_copy'),
+      path: EnumRoutePath.feat_copy,
+      component: FeatCopy,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.feat_copy,
+        fullPage: true
+      }
+    }
+  ]
+};
+
+export default FEAT;

src/router/modules/index.ts

@@ -2,8 +2,9 @@ import ROOT from './root';
 import DASHBOARD from './dashboard';
 import DOCUMENT from './document';
 import COMPONENT from './component';
+import FEAT from './feat';
 import EXCEPTION from './exception';
 import MULTI_MENU from './multi-menu';
 import ABOUT from './about';
 
-export default [ROOT, DASHBOARD, DOCUMENT, COMPONENT, EXCEPTION, MULTI_MENU, ABOUT];
+export default [ROOT, DASHBOARD, DOCUMENT, COMPONENT, FEAT, EXCEPTION, MULTI_MENU, ABOUT];

src/views/feat/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>