feat: 添加PageHeader路由

Author: coderyjw

src/lib/index.ts

@@ -24,6 +24,7 @@ import JwAffix from "./affix/index.vue";
 import JwBacktop from "./backtop/index.vue";
 import JwBreadcrumb from "./breadcrumb/breadcrumb.vue";
 import JwBreadcrumbItem from "./breadcrumb/breadcrumb-item.vue";
+import jwPageHeader from "./page-header/index.vue";
 import JwTabs from "./tabs/index.vue";
 import JwTab from "./tab/index.vue";
 
@@ -53,6 +54,7 @@ export {
  JwBacktop,
  JwBreadcrumb,
  JwBreadcrumbItem,
+ jwPageHeader,
  JwTabs,
  JwTab,
 };
@@ -81,6 +83,7 @@ const components = [
  JwBacktop,
  JwBreadcrumb,
  JwBreadcrumbItem,
+ jwPageHeader,
  JwTabs,
  JwTab,
 ];

src/lib/page-header/index.ts

@@ -0,0 +1,12 @@
+<template>
+ <div class="jw-page-header"></div>
+</template>
+
+<script setup lang="ts"></script>
+<script lang="ts">
+export default {
+ name: "jwPageHeader",
+};
+</script>
+
+<style scoped></style>

src/lib/page-header/index.vue

@@ -30,6 +30,7 @@ import DialogDoc from "@/views/doc/dialog/index.vue";
 import AffixDoc from "@/views/doc/affix/index.vue";
 import BacktopDoc from "@/views/doc/backtop/index.vue";
 import BreadcrumbDoc from "@/views/doc/breadcrumb/index.vue";
+import PageHeaderDoc from "@/views/doc/page-header/index.vue";
 import TabsDoc from "@/views/doc/tabs/index.vue";
 
 const docMenus = {
@@ -64,6 +65,7 @@ const docMenus = {
  { path: "affix", component: AffixDoc, name: "固钉 Affix" },
  { path: "backtop", component: BacktopDoc, name: "回到顶部 Backtop" },
  { path: "breadcrumb", component: BreadcrumbDoc, name: "面包屑 Breadcrumb" },
+ { path: "page-header", component: PageHeaderDoc, name: "页头 PageHeader" },
  { path: "tabs", component: TabsDoc, name: "标签页 Tabs" },
  ],
 };

src/router/doc-routes.ts

@@ -0,0 +1,10 @@
+<preview>基本使用</preview>
+<template>
+ <jw-page-header content="detail" @back="goBack" />
+</template>
+
+<script setup lang="ts">
+const goBack = () => {
+ console.log("go back");
+};
+</script>

src/views/doc/page-header/PageHeaderPreview1.preview.vue

@@ -0,0 +1,18 @@
+<template>
+ <div class="pageheader-doc-wrapper">
+ <h1>Page Header 页头</h1>
+ <p>如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。</p>
+ <div class="preview-wrapper">
+ <Preview :component="PageHeaderPreview1"/>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import Preview from "@/components/Preview.vue";
+import PageHeaderPreview1 from "./PageHeaderPreview1.preview.vue";
+import PrevAndNext from "@/components/PrevAndNext.vue";
+import Doc from "@/components/Doc.vue";
+</script>
+
+<style scoped></style>