feat: PageHeader自定义图标

Author: coderyjw

src/lib/page-header/index.vue

@@ -31,8 +31,8 @@ const props = defineProps({
 const emits = defineEmits(["back"]);
 
 const handleBack = () => {
- emits('back')
-}
+ emits("back");
+};
 </script>
 <script lang="ts">
 export default {
@@ -60,6 +60,7 @@ export default {
  height: 100%;
  display: flex;
  align-items: center;
+ margin-right: 5px;
  }
  }
 

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

@@ -0,0 +1,15 @@
+<preview>自定义图标</preview>
+<template>
+ <jw-page-header
+ content="detail"
+ @back="goBack"
+ :icon="ArrowBackIosNewOutlined"
+ />
+</template>
+
+<script setup lang="ts">
+import { ArrowBackIosNewOutlined } from "@vicons/material";
+const goBack = () => {
+ console.log("go back");
+};
+</script>

src/views/doc/page-header/index.vue

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