@hlw-uni/mp-vue 1.0.8 → 1.0.10

package/dist/index.js

@@ -169,10 +169,13 @@
     }
   });
   const index$4 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-72364322"]]);
-  const _hoisted_1$3 = { class: "header-title" };
+  const _hoisted_1$3 = {
+    key: 0,
+    class: "header-placeholder"
+  };
   const _hoisted_2$3 = {
     key: 0,
-    class: "header-title"
+    class: "header-title header-title--center"
   };
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
@@ -180,7 +183,11 @@
       extraHeight: { default: 0 },
       bgClass: { default: "" },
       isBack: { type: Boolean, default: false },
-      title: { default: "" }
+      title: { default: "" },
+      titleAlign: { default: "center" },
+      titleSize: { default: "26rpx" },
+      titleWeight: { default: 500 },
+      titleColor: { default: "" }
     },
     emits: ["back"],
     setup(__props, { emit: __emit }) {
@@ -211,6 +218,11 @@
         emit("back");
         uni.navigateBack({ delta: 1 });
       };
+      const titleStyle = vue.computed(() => ({
+        fontSize: props.titleSize,
+        fontWeight: String(props.titleWeight),
+        ...props.titleColor ? { color: props.titleColor } : {}
+      }));
       const slots = vue.useSlots();
       const hasBgSlot = vue.computed(() => !props.isBack && !!slots.bg);
       const statusBarHeight = vue.ref(getStatusBarHeight());
@@ -237,22 +249,36 @@
               vue.createElementVNode("view", {
                 class: "header-back",
                 onClick: handleBack
-              }, [..._cache[0] || (_cache[0] = [
-                vue.createElementVNode("text", { class: "iconfont icon-back" }, null, -1)
-              ])]),
-              vue.createElementVNode("view", _hoisted_1$3, [
-                vue.createElementVNode("text", null, vue.toDisplayString(props.title), 1)
+              }, [
+                vue.renderSlot(_ctx.$slots, "back-icon", {}, () => [
+                  _cache[0] || (_cache[0] = vue.createElementVNode("text", { class: "i-fa6-solid-chevron-left header-back-icon" }, null, -1))
+                ], true)
               ]),
-              _cache[1] || (_cache[1] = vue.createElementVNode("view", { class: "header-placeholder" }, null, -1))
+              vue.createElementVNode("view", {
+                class: vue.normalizeClass(["header-title", props.titleAlign === "left" ? "header-title--left" : "header-title--center"])
+              }, [
+                vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                  vue.createElementVNode("text", {
+                    class: "header-title-text",
+                    style: vue.normalizeStyle(titleStyle.value)
+                  }, vue.toDisplayString(props.title), 5)
+                ], true)
+              ], 2),
+              props.titleAlign === "center" ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_1$3)) : vue.createCommentVNode("", true)
             ], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
-              props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$3, vue.toDisplayString(props.title), 1)) : vue.createCommentVNode("", true)
+              props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$3, [
+                vue.createElementVNode("text", {
+                  class: "header-title-text",
+                  style: vue.normalizeStyle(titleStyle.value)
+                }, vue.toDisplayString(props.title), 5)
+              ])) : vue.createCommentVNode("", true)
             ], true)
           ], 4)
         ], 4);
       };
     }
   });
-  const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-91cf6eee"]]);
+  const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-9a6c839c"]]);
   const _hoisted_1$2 = { class: "hlw-loading" };
   const _hoisted_2$2 = {
     key: 0,

package/dist/index.mjs

@@ -166,10 +166,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 const index$4 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-72364322"]]);
-const _hoisted_1$3 = { class: "header-title" };
+const _hoisted_1$3 = {
+  key: 0,
+  class: "header-placeholder"
+};
 const _hoisted_2$3 = {
   key: 0,
-  class: "header-title"
+  class: "header-title header-title--center"
 };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "index",
@@ -177,7 +180,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     extraHeight: { default: 0 },
     bgClass: { default: "" },
     isBack: { type: Boolean, default: false },
-    title: { default: "" }
+    title: { default: "" },
+    titleAlign: { default: "center" },
+    titleSize: { default: "26rpx" },
+    titleWeight: { default: 500 },
+    titleColor: { default: "" }
   },
   emits: ["back"],
   setup(__props, { emit: __emit }) {
@@ -208,6 +215,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       emit("back");
       uni.navigateBack({ delta: 1 });
     };
+    const titleStyle = computed(() => ({
+      fontSize: props.titleSize,
+      fontWeight: String(props.titleWeight),
+      ...props.titleColor ? { color: props.titleColor } : {}
+    }));
     const slots = useSlots();
     const hasBgSlot = computed(() => !props.isBack && !!slots.bg);
     const statusBarHeight = ref(getStatusBarHeight());
@@ -234,22 +246,36 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             createElementVNode("view", {
               class: "header-back",
               onClick: handleBack
-            }, [..._cache[0] || (_cache[0] = [
-              createElementVNode("text", { class: "iconfont icon-back" }, null, -1)
-            ])]),
-            createElementVNode("view", _hoisted_1$3, [
-              createElementVNode("text", null, toDisplayString(props.title), 1)
+            }, [
+              renderSlot(_ctx.$slots, "back-icon", {}, () => [
+                _cache[0] || (_cache[0] = createElementVNode("text", { class: "i-fa6-solid-chevron-left header-back-icon" }, null, -1))
+              ], true)
             ]),
-            _cache[1] || (_cache[1] = createElementVNode("view", { class: "header-placeholder" }, null, -1))
+            createElementVNode("view", {
+              class: normalizeClass(["header-title", props.titleAlign === "left" ? "header-title--left" : "header-title--center"])
+            }, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createElementVNode("text", {
+                  class: "header-title-text",
+                  style: normalizeStyle(titleStyle.value)
+                }, toDisplayString(props.title), 5)
+              ], true)
+            ], 2),
+            props.titleAlign === "center" ? (openBlock(), createElementBlock("view", _hoisted_1$3)) : createCommentVNode("", true)
           ], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
-            props.title ? (openBlock(), createElementBlock("view", _hoisted_2$3, toDisplayString(props.title), 1)) : createCommentVNode("", true)
+            props.title ? (openBlock(), createElementBlock("view", _hoisted_2$3, [
+              createElementVNode("text", {
+                class: "header-title-text",
+                style: normalizeStyle(titleStyle.value)
+              }, toDisplayString(props.title), 5)
+            ])) : createCommentVNode("", true)
           ], true)
         ], 4)
       ], 4);
     };
   }
 });
-const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-91cf6eee"]]);
+const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-9a6c839c"]]);
 const _hoisted_1$2 = { class: "hlw-loading" };
 const _hoisted_2$2 = {
   key: 0,

package/dist/style.css

@@ -57,7 +57,7 @@
     font-size: 28rpx;
     color: #bbb;
 }
-.hlw-header[data-v-91cf6eee] {
+.hlw-header[data-v-9a6c839c] {
   position: sticky;
   top: 0;
   z-index: 999;
@@ -65,21 +65,18 @@
   flex-direction: column;
   overflow: hidden;
 }
-.header-bg-layer[data-v-91cf6eee] {
+.header-bg-layer[data-v-9a6c839c] {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 0;
 }
-.status-bar-spacer[data-v-91cf6eee] {
+.status-bar-spacer[data-v-9a6c839c] {
   flex-shrink: 0;
   width: 100%;
   position: relative;
   z-index: 1;
 }
-.header-content-area[data-v-91cf6eee] {
+.header-content-area[data-v-9a6c839c] {
   flex-shrink: 0;
   width: 100%;
   display: flex;
@@ -87,7 +84,7 @@
   position: relative;
   z-index: 1;
 }
-.header-back[data-v-91cf6eee] {
+.header-back[data-v-9a6c839c] {
   width: 88rpx;
   height: 100%;
   display: flex;
@@ -95,22 +92,31 @@
   justify-content: center;
   flex-shrink: 0;
 }
-.header-back .iconfont[data-v-91cf6eee] {
-  font-size: 40rpx;
+.header-back-icon[data-v-9a6c839c] {
+  font-size: 36rpx;
 }
-.header-title[data-v-91cf6eee] {
+.header-title[data-v-9a6c839c] {
   flex: 1;
   overflow: hidden;
+}
+.header-title--center[data-v-9a6c839c] {
+  text-align: center;
+}
+.header-title--left[data-v-9a6c839c] {
+  text-align: left;
+  padding-left: 4rpx;
+}
+.header-title-text[data-v-9a6c839c] {
+  display: block;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   letter-spacing: 1rpx;
-  text-align: center;
-}
-.header-title text[data-v-91cf6eee] {
   font-size: 26rpx;
   font-weight: 500;
+  color: #14181f;
 }
-.header-placeholder[data-v-91cf6eee] {
+.header-placeholder[data-v-9a6c839c] {
   width: 88rpx;
   flex-shrink: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.0.8",
+    "version": "1.0.10",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

package/src/components/hlw-header/index.vue

@@ -6,16 +6,28 @@
         <view class="status-bar-spacer" :style="{ height: statusBarHeight + 'px' }"></view>
         <view class="header-content-area" :style="{ height: NAV_BAR_CONTENT_HEIGHT + 'px' }">
             <template v-if="props.isBack">
+                <!-- 返回按钮 -->
                 <view class="header-back" @click="handleBack">
-                    <text class="iconfont icon-back"></text>
+                    <slot name="back-icon">
+                        <text class="i-fa6-solid-chevron-left header-back-icon"></text>
+                    </slot>
                 </view>
-                <view class="header-title">
-                    <text>{{ props.title }}</text>
+
+                <!-- 标题 -->
+                <view class="header-title" :class="props.titleAlign === 'left' ? 'header-title--left' : 'header-title--center'">
+                    <slot name="title">
+                        <text class="header-title-text" :style="titleStyle">{{ props.title }}</text>
+                    </slot>
                 </view>
-                <view class="header-placeholder"></view>
+
+                <!-- 右侧占位（居中时保持对称） -->
+                <view v-if="props.titleAlign === 'center'" class="header-placeholder"></view>
             </template>
+
             <slot v-else>
-                <view v-if="props.title" class="header-title">{{ props.title }}</view>
+                <view v-if="props.title" class="header-title header-title--center">
+                    <text class="header-title-text" :style="titleStyle">{{ props.title }}</text>
+                </view>
             </slot>
         </view>
     </view>
@@ -51,6 +63,14 @@ interface Props {
     bgClass?: string;
     isBack?: boolean;
     title?: string;
+    /** 标题对齐方式，默认 center */
+    titleAlign?: "center" | "left";
+    /** 标题字号，默认 26rpx */
+    titleSize?: string;
+    /** 标题字重，默认 500 */
+    titleWeight?: string | number;
+    /** 标题颜色 */
+    titleColor?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,6 +78,10 @@ const props = withDefaults(defineProps<Props>(), {
     bgClass: "",
     isBack: false,
     title: "",
+    titleAlign: "center",
+    titleSize: "26rpx",
+    titleWeight: 500,
+    titleColor: "",
 });
 
 const emit = defineEmits<{
@@ -69,6 +93,12 @@ const handleBack = () => {
     uni.navigateBack({ delta: 1 });
 };
 
+const titleStyle = computed(() => ({
+    fontSize: props.titleSize,
+    fontWeight: String(props.titleWeight),
+    ...(props.titleColor ? { color: props.titleColor } : {}),
+}));
+
 const slots = useSlots();
 const hasBgSlot = computed(() => !props.isBack && !!slots.bg);
 const statusBarHeight = ref(getStatusBarHeight());
@@ -87,10 +117,7 @@ const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT
 
 .header-bg-layer {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     z-index: 0;
 }
 
@@ -117,24 +144,35 @@ const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+}
 
-    .iconfont {
-        font-size: 40rpx;
-    }
+.header-back-icon {
+    font-size: 36rpx;
 }
 
 .header-title {
     flex: 1;
     overflow: hidden;
+
+    &--center {
+        text-align: center;
+    }
+
+    &--left {
+        text-align: left;
+        padding-left: 4rpx;
+    }
+}
+
+.header-title-text {
+    display: block;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: 1rpx;
-    text-align: center;
-
-    text {
-        font-size: 26rpx;
-        font-weight: 500;
-    }
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #14181f;
 }
 
 .header-placeholder {

package/src/env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<object, object, unknown>
+    export default component
+}