@hlw-uni/mp-vue 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/style.css +10 -9
- package/package.json +3 -2
- package/src/components/hlw-header/index.vue +84 -83
package/dist/index.js
CHANGED
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
};
|
|
251
251
|
}
|
|
252
252
|
});
|
|
253
|
-
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-
|
|
253
|
+
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6f338046"]]);
|
|
254
254
|
const _hoisted_1$2 = { class: "hlw-loading" };
|
|
255
255
|
const _hoisted_2$2 = {
|
|
256
256
|
key: 0,
|
package/dist/index.mjs
CHANGED
|
@@ -247,7 +247,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
247
247
|
};
|
|
248
248
|
}
|
|
249
249
|
});
|
|
250
|
-
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-
|
|
250
|
+
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6f338046"]]);
|
|
251
251
|
const _hoisted_1$2 = { class: "hlw-loading" };
|
|
252
252
|
const _hoisted_2$2 = {
|
|
253
253
|
key: 0,
|
package/dist/style.css
CHANGED
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
font-size: 28rpx;
|
|
58
58
|
color: #bbb;
|
|
59
59
|
}
|
|
60
|
-
.hlw-header[data-v-
|
|
60
|
+
.hlw-header[data-v-6f338046] {
|
|
61
61
|
position: sticky;
|
|
62
62
|
top: 0;
|
|
63
63
|
z-index: 999;
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
flex-direction: column;
|
|
66
66
|
overflow: hidden;
|
|
67
67
|
}
|
|
68
|
-
.header-bg-layer[data-v-
|
|
68
|
+
.header-bg-layer[data-v-6f338046] {
|
|
69
69
|
position: absolute;
|
|
70
70
|
top: 0;
|
|
71
71
|
left: 0;
|
|
@@ -73,13 +73,13 @@
|
|
|
73
73
|
bottom: 0;
|
|
74
74
|
z-index: 0;
|
|
75
75
|
}
|
|
76
|
-
.status-bar-spacer[data-v-
|
|
76
|
+
.status-bar-spacer[data-v-6f338046] {
|
|
77
77
|
flex-shrink: 0;
|
|
78
78
|
width: 100%;
|
|
79
79
|
position: relative;
|
|
80
80
|
z-index: 1;
|
|
81
81
|
}
|
|
82
|
-
.header-content-area[data-v-
|
|
82
|
+
.header-content-area[data-v-6f338046] {
|
|
83
83
|
flex-shrink: 0;
|
|
84
84
|
width: 100%;
|
|
85
85
|
display: flex;
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
position: relative;
|
|
88
88
|
z-index: 1;
|
|
89
89
|
}
|
|
90
|
-
.header-back[data-v-
|
|
90
|
+
.header-back[data-v-6f338046] {
|
|
91
91
|
width: 88rpx;
|
|
92
92
|
height: 100%;
|
|
93
93
|
display: flex;
|
|
@@ -95,19 +95,20 @@
|
|
|
95
95
|
justify-content: center;
|
|
96
96
|
flex-shrink: 0;
|
|
97
97
|
}
|
|
98
|
-
.header-back .iconfont[data-v-
|
|
98
|
+
.header-back .iconfont[data-v-6f338046] {
|
|
99
99
|
font-size: 40rpx;
|
|
100
100
|
}
|
|
101
|
-
.header-title[data-v-
|
|
101
|
+
.header-title[data-v-6f338046] {
|
|
102
102
|
flex: 1;
|
|
103
103
|
text-align: center;
|
|
104
|
-
font-size:
|
|
104
|
+
font-size: 26rpx;
|
|
105
105
|
font-weight: 500;
|
|
106
106
|
overflow: hidden;
|
|
107
107
|
text-overflow: ellipsis;
|
|
108
108
|
white-space: nowrap;
|
|
109
|
+
letter-spacing: 1rpx;
|
|
109
110
|
}
|
|
110
|
-
.header-placeholder[data-v-
|
|
111
|
+
.header-placeholder[data-v-6f338046] {
|
|
111
112
|
width: 88rpx;
|
|
112
113
|
flex-shrink: 0;
|
|
113
114
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hlw-uni/mp-vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
22
|
"build": "vite build",
|
|
23
|
-
"dev": "vite build --watch"
|
|
23
|
+
"dev": "vite build --watch",
|
|
24
|
+
"publish:npm": "pnpm build && npm publish --access public"
|
|
24
25
|
},
|
|
25
26
|
"publishConfig": {
|
|
26
27
|
"access": "public"
|
|
@@ -1,70 +1,70 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
<view class="hlw-header" :style="{ height: totalNavBarHeight + 'px' }">
|
|
3
|
+
<view class="header-bg-layer" :class="hasBgSlot ? '' : props.bgClass">
|
|
4
|
+
<slot v-if="!props.isBack" name="bg"></slot>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="status-bar-spacer" :style="{ height: statusBarHeight + 'px' }"></view>
|
|
7
|
+
<view class="header-content-area" :style="{ height: NAV_BAR_CONTENT_HEIGHT + 'px' }">
|
|
8
|
+
<template v-if="props.isBack">
|
|
9
|
+
<view class="header-back" @click="handleBack">
|
|
10
|
+
<text class="iconfont icon-back"></text>
|
|
11
|
+
</view>
|
|
12
|
+
<view class="header-title">{{ props.title }}</view>
|
|
13
|
+
<view class="header-placeholder"></view>
|
|
14
|
+
</template>
|
|
15
|
+
<slot v-else>
|
|
16
|
+
<view v-if="props.title" class="header-title">{{ props.title }}</view>
|
|
17
|
+
</slot>
|
|
11
18
|
</view>
|
|
12
|
-
<view class="header-title">{{ props.title }}</view>
|
|
13
|
-
<view class="header-placeholder"></view>
|
|
14
|
-
</template>
|
|
15
|
-
<slot v-else>
|
|
16
|
-
<view v-if="props.title" class="header-title">{{ props.title }}</view>
|
|
17
|
-
</slot>
|
|
18
19
|
</view>
|
|
19
|
-
</view>
|
|
20
20
|
</template>
|
|
21
21
|
|
|
22
22
|
<script setup lang="ts">
|
|
23
|
-
import { ref, computed, useSlots } from
|
|
23
|
+
import { ref, computed, useSlots } from "vue";
|
|
24
24
|
|
|
25
25
|
const getNavBarContentHeight = (): number => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
26
|
+
try {
|
|
27
|
+
const menuInfo = uni.getMenuButtonBoundingClientRect?.();
|
|
28
|
+
if (!menuInfo) return 44;
|
|
29
|
+
const systemInfo = uni.getSystemInfoSync();
|
|
30
|
+
return (menuInfo.top - systemInfo.statusBarHeight!) * 2 + menuInfo.height;
|
|
31
|
+
} catch {
|
|
32
|
+
return 44;
|
|
33
|
+
}
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
const getStatusBarHeight = (): number => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
try {
|
|
38
|
+
const systemInfo = uni.getSystemInfoSync();
|
|
39
|
+
return systemInfo.statusBarHeight || 20;
|
|
40
|
+
} catch {
|
|
41
|
+
return 20;
|
|
42
|
+
}
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
const NAV_BAR_CONTENT_HEIGHT = getNavBarContentHeight();
|
|
46
46
|
|
|
47
47
|
interface Props {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
extraHeight?: number;
|
|
49
|
+
bgClass?: string;
|
|
50
|
+
isBack?: boolean;
|
|
51
|
+
title?: string;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
const props = withDefaults(defineProps<Props>(), {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
extraHeight: 0,
|
|
56
|
+
bgClass: "",
|
|
57
|
+
isBack: false,
|
|
58
|
+
title: "",
|
|
59
59
|
});
|
|
60
60
|
|
|
61
61
|
const emit = defineEmits<{
|
|
62
|
-
|
|
62
|
+
back: [];
|
|
63
63
|
}>();
|
|
64
64
|
|
|
65
65
|
const handleBack = () => {
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
emit("back");
|
|
67
|
+
uni.navigateBack({ delta: 1 });
|
|
68
68
|
};
|
|
69
69
|
|
|
70
70
|
const slots = useSlots();
|
|
@@ -75,64 +75,65 @@ const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT
|
|
|
75
75
|
|
|
76
76
|
<style lang="scss" scoped>
|
|
77
77
|
.hlw-header {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
78
|
+
position: sticky;
|
|
79
|
+
top: 0;
|
|
80
|
+
z-index: 999;
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
overflow: hidden;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
.header-bg-layer {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: 0;
|
|
89
|
+
left: 0;
|
|
90
|
+
right: 0;
|
|
91
|
+
bottom: 0;
|
|
92
|
+
z-index: 0;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
.status-bar-spacer {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
96
|
+
flex-shrink: 0;
|
|
97
|
+
width: 100%;
|
|
98
|
+
position: relative;
|
|
99
|
+
z-index: 1;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
.header-content-area {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
103
|
+
flex-shrink: 0;
|
|
104
|
+
width: 100%;
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
position: relative;
|
|
108
|
+
z-index: 1;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.header-back {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
112
|
+
width: 88rpx;
|
|
113
|
+
height: 100%;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
flex-shrink: 0;
|
|
118
|
+
|
|
119
|
+
.iconfont {
|
|
120
|
+
font-size: 40rpx;
|
|
121
|
+
}
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
.header-title {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
125
|
+
flex: 1;
|
|
126
|
+
text-align: center;
|
|
127
|
+
font-size: 26rpx;
|
|
128
|
+
font-weight: 500;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
text-overflow: ellipsis;
|
|
131
|
+
white-space: nowrap;
|
|
132
|
+
letter-spacing: 1rpx;
|
|
132
133
|
}
|
|
133
134
|
|
|
134
135
|
.header-placeholder {
|
|
135
|
-
|
|
136
|
-
|
|
136
|
+
width: 88rpx;
|
|
137
|
+
flex-shrink: 0;
|
|
137
138
|
}
|
|
138
139
|
</style>
|