init

src/component/pageHeader/index.less

@@ -0,0 +1,37 @@
+.lay-page-header{
+  display: flex;
+  line-height: 24px;
+}
+.lay-page-header__left {
+  display: flex;
+  cursor: pointer;
+  margin-right: 40px;
+  position: relative;
+  color: var(--global-neutral-color-8);
+}
+.lay-page-header__left:after {
+  content: "";
+  position: absolute;
+  width: 1px;
+  height: 16px;
+  right: -20px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--global-neutral-color-8);
+}
+.lay-page-header__left:hover .layui-icon-return ,.lay-page-header__left:hover .lay-page-header__title{
+  color: var(--global-checked-color) !important;
+}
+
+.lay-page-header__left .layui-icon-return {
+  font-size: 14px;
+  margin-right: 6px;
+  align-self: center;
+}
+.lay-page-header__title {
+  font-size: 14px;
+}
+.lay-page-header__content {
+  font-size: 18px;
+  color: #393D49;
+}

src/component/pageHeader/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/pageHeader/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="lay-page-header">
+    <div class="lay-page-header__left" @click="emits('back')">
+      <slot name="backIcon"
+        ><i class="layui-icon" :class="[backIcon]"></i
+      ></slot>
+      <div class="lay-page-header__title">{{ backText }}</div>
+    </div>
+    <div class="lay-page-header__content">
+      <slot v-if="slots.default"></slot>
+      <template v-else> {{ content }}</template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "LayPageHeader",
+};
+</script>
+<script lang="ts" setup>
+import { useSlots } from "vue";
+import "./index.less";
+
+export interface PageHeaderProps {
+  content?: string;
+  backText?: string;
+  backIcon?: string;
+}
+const props = withDefaults(defineProps<PageHeaderProps>(), {
+  content: "",
+  backText: "返回",
+  backIcon: "layui-icon-return",
+});
+
+const emits = defineEmits(["back"]);
+
+const slots = useSlots();
+</script>